[bug]: Data Table has shifting checkbox

[Eshan05]

Describe the bug

The data table example shown in https://github.com/shadcn-ui/ui/tree/main/apps/www/app/(app)/examples/tasks has an issue wherein the checkbox for either selecting a single row or selecting all rows makes the checkboxes shift. Also, by default the checkbox isn't aligned. I have fixed it by going in columns.tsx and change the following block

    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
        className="translate-y-[2px]"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
        className="translate-y-[2px]"
      />
    ),

With following fixes, which then becomes as shown in video.

-         className="translate-y-[2px]"
+         className="flex items-center"

firefox_qV068j2nv3.mp4

I am not sure whether to make a PR or not so made this first. I didn't see any open issues either

Affected component/components

Data Table

How to reproduce

1. Make the tasks component by just copy pasting the files as is into your project (I did it with Next.js) OR go to https://ui.shadcn.com/examples/tasks
2. Go to your route and try selecting one of the task/row
3. See the error with the checkbox shifting upwards also the column header checkbox shifting upwards

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Windows 10
Firefox Latest

Before submitting

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