Skip to content

Cell building blocks

Chips, truncated text, two-line text, tooltips and a row actions menu: the small components a cell usually needs, already themed and accessible.

Report an issueSource

Basics

Loading example…

Cells need the same few things over and over: text that has to fit, a list that has to collapse, a status that has to be recognisable, an action that must not be mistaken for the row. These components are those things, already using the theme tokens and already accessible.

import { ActionButton, Chip, ChipList, TruncatedText, TwoLineText } from '@kingtech/react-tablekit';
ComponentFor
TruncatedTextText that clips with an ellipsis and keeps the full value as a tooltip
TwoLineTextA primary value with a quieter second line, like a name over an email
MultiLineListSeveral values in one cell, stacked and clipped after a limit
ChipA status or label, coloured from its own definition
ChipListSeveral chips with a +N overflow so the row height stays put
ActionButtonAn icon button sized for a cell, with a required accessible name
RowActionsMenuThe … menu at the end of a row
TooltipThe table's own tooltip, so hints look the same everywhere

Using them

col.accessor('name', {
  cell: ({ row }) => <TwoLineText primary={row.original.name} secondary={row.original.email} />,
});

col.display({
  id: 'actions',
  cell: ({ row, table }) => (
    <ActionButton
      label="Edit"
      icon={<PenIcon />}
      onClick={() => table.options.meta?.onEdit?.(row.original)}
    />
  ),
});

ActionButton requires a label: an icon button without an accessible name is a dead end for a screen reader, so the type will not let you write one.

They do not swallow the row click

Every one of these is treated as interactive content, so clicking a chip or an action button does not also fire the row's onRowClick. That is why a picker with an edit button in each row behaves the way a reader expects.

Customization

They are ordinary components: pass a class name, wrap them, or ignore them entirely. If your design system has its own, use those. These exist so that a table looks finished before you have written any, not to be mandatory.

Chip takes colours per value, and the same definitions are reused by the filter chips, so a status looks the same in the cell and in the filter bar.

Limitations

  • They are presentational. None of them touches table state; an ActionButton does whatever its onClick does.
  • TruncatedText needs a bounded width to truncate. In an auto-width column with no maxWidth there is nothing to clip against.
  • ChipList measures nothing. The overflow threshold is a count you pass, not a width calculation.

API

Edit this pageReport a problem with this page