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

[JollyBolt]

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

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[applemyth]

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]

https://github.com/shadcn-ui/ui/pull/4772