Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug]: Checking the checkbox in data table increases height of rows. #4433

Open
2 tasks done
JollyBolt opened this issue Jul 27, 2024 · 2 comments
Open
2 tasks done
Labels
bug Something isn't working

Comments

@JollyBolt
Copy link

Describe the bug

Issue

On checking the CheckBox component in the Data Table, the height of rows increases.

My Solution

The Checkbox component contains the following code:

"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }

Changing the following line

  <Check className="h-4 w-4" />

to

  <Check className="h-3 w-3" />

fixes the issue.

I don't know if this solution messes up the implementation of Checkbox in any other case. If this seems an acceptable solution, I would like to be assigned this issue. I would create a PR with the above-mentioned solution.

Affected component/components

Data Table

How to reproduce

Implement the demo table on https://ui.shadcn.com/docs/components/data-table.
OR
Check out the StackBlitz link provided.

Codesandbox/StackBlitz link

https://stackblitz.com/edit/stackblitz-starters-rx7yav?file=app%2Fpage.tsx

Logs

No response

System Info

System: Macbook M1
Issue is seen in the following browsers: Chrome, Brave, Safari, Firefox

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
@JollyBolt JollyBolt added the bug Something isn't working label Jul 27, 2024
@applemyth
Copy link

I just set the height of wherever I'm using the Checkbox as the height of the Checkbox.

Using the Shadcn example for Row Selection:

    header: ({ table }) => (
      <Checkbox 

        className="flex h-4 w-4"

        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
            <Checkbox

              className="flex h-4 w-4"

              checked={row.getIsSelected()}
              onCheckedChange={(value) => row.toggleSelected(!!value)}
              aria-label="Select row"
            />

I think this also resolves the issue across browsers. However the sizing of the checkmark itself slightly increases, but you can try to change that in the component itself to fix that.

@Jrocam
Copy link

Jrocam commented Sep 7, 2024

#4772

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants