fix(Table): Make checkbox selection interactive and fix click handling

[mattrothenberg]

Summary

• Fix Table checkbox demos on docs site - checkboxes now work interactively
• Add indeterminate prop support to Table.CheckHead and Table.CheckCell
• Add default w-10 (40px) width to checkbox cells
• Expand checkbox hit area using CSS pseudo-element
• Add dropdown menu to full example's action button

check.mov

Problem

The Table component demos at https://kumo-ui.com/components/table/ had non-functional checkboxes:

1. "Selected Row" and "Full Example" tables didn't show row highlights when selected
2. Checkboxes didn't work at all - they were static with no state management

Solution

Component changes (table.tsx)

• Added indeterminate prop to Table.CheckHead and Table.CheckCell for partial selection state
• Added w-10 default width to checkbox cells for consistent sizing
• Used CSS pseudo-element (before:-inset-3) to expand the checkbox hit area without needing wrapper hacks

Demo changes (TableDemo.tsx)

• Added proper React state management (useState<Set<string>>) to all checkbox demos
• Wired up onValueChange handlers for interactive selection
• Added indeterminate state to header checkboxes
• Removed redundant colgroup width for checkbox column (component handles it now)
• Added DropdownMenu to the action button with View, Edit, Delete options

Open Question

Is the variant="selected" API on Table.Row weird? Would a boolean make more sense here?

<Table.Row variant={selectedIds.has(row.id) ? "selected" : "default"}>
  <Table.CheckCell checked={selectedIds.has(row.id)} />

Should we consider:

• A simpler selected boolean prop on Table.Row?
• Having the row automatically detect selection from its CheckCell child?

Testing

1. Visit /components/table/ on the docs site
2. Click checkboxes - they should toggle once per click
3. Click the header checkbox - should select/deselect all rows
4. Selected rows should show background highlight
5. Partially selected tables should show indeterminate (minus) icon in header
6. Click the three-dots button - dropdown menu should appear

[mattrothenberg]

CSS trick to make the tap target of the checkbox fill the entire surrounding w-10 div.

[invisal]

Super cool :)

[invisal]

Is the variant="selected" API on Table.Row weird? Currently you have to pass selection state twice:

While it may seem like you’re passing selection state twice, this is a intentional choice to keep the Table component stateless and presentational. By decoupling the visual highlight from the functional checkbox, we provide developers with full control.

Automated syncing (checking the box when the row is "selected") breaks in complex scenarios—specifically when a single row contains multiple independent actions. For example, in a Permissions Matrix, a row shouldn't be "selected" just because one of several capability checkboxes is active:

<Table>
   <Table.Header>
       <Table.Row>
           <Table.Head>Permission</Table.Head>
           <Table.Head>Write</Table.Head>
           <Table.Head>Read</Table.Head>
       </Table.Row>
   </Table.Header>
   <Table.Body>
        <Table.Row>
            <Table.Cell>D1</Table.Cell>
            <Table.CellCheck />
            <Table.CellCheck />
        </Table.Row>
   </Table.Body>
</Table>