Ring UI

To implement row selection (via checkbox or row click), use the TableSelection utility to manage state. When handling row clicks, use isWithinInteractiveElement to ensure clicking a button or checkbox inside a row doesn't trigger the row's selection logic.

const [data] = useState(['Amsterdam', 'Berlin', 'Limassol', 'Prague'])
const [selection, setSelection] = useState(() => new TableSelection<string>({data}))

return (
  <Table
    data={data}
    getKey={(_, i) => i}
    columns={[
      {
        key: 'Check',
        renderCell: item => (
          <input
            type="checkbox"
            checked={selection.isSelected(item)}
            onChange={e => setSelection(
              e.target.checked
                ? selection.select(item)
                : selection.deselect(item)
            )}
          />
        )
      },
      {
        key: 'City',
        renderCell: item => item,
      }
    ]}
    renderItem={(item, index, items) => (
      <DefaultItemRenderer
        index={index}
        clickable
        selected={selection.isSelected(item)}
        onClick={e => {
          if (!isWithinInteractiveElement(e.target)) {
            setSelection(selection.toggleSelection(item))
          }
        }}
      />
    )}
  />
)

The TableProps<T> interface defines the configuration for the Table component. Key props include:

• data: readonly T[] - The array of items to render.
• columns: readonly Column<T>[] - The column definitions.
• getKey: (item: T, index: number, items: readonly T[]) => React.Key - Function to provide a unique key for each item.
• renderItem: (item: T, index: number, items: readonly T[]) => React.ReactNode - Customizes how an item is rendered. Can return DefaultItemRenderer or custom rows using TableRow and TableCell.
• onSort: (columnIndex: number, newOrder: SortOrder, columns: readonly Column<T>[]) => void - Callback for column sorting.
• onColumnDelete: (column: Column<T>, columnIndex: number, columns: readonly Column<T>[]) => void - Callback for deleting a column.
• onColumnReorder: (columnBeingReordered: Column<T>, fromIndex: number, insertionIndex: number, columns: readonly Column<T>[]) => void - Callback for reordering columns.
• onItemReorder: (itemBeingReordered: T, fromIndex: number, insertionIndex: number, items: readonly T[]) => boolean - Callback for reordering items.
• virtualizeRows: boolean - Enables row virtualization.
• scrollerRef: RefObject<HTMLElement | null> - Required for virtualizeRows if the scroller is not the document.
• columnEditing: boolean | undefined - Controls column editing mode (reorder/delete buttons visibility).

The Column<T> interface defines how individual columns behave and render:

• key: React.Key - Unique identifier for the column.
• name: string - Used for aria-labels. Defaults to String(key).
• renderHeader: () => React.ReactNode - Custom header content.
• renderCell: (item: T, index: number, items: readonly T[]) => React.ReactNode - Custom cell content. Defaults to stringifying the value.
• indent: boolean - If true, applies indentation based on the row's level.
• sortOrder: 'none' | 'ascending' | 'descending' - The current sort state.
• deletable: boolean - Whether a delete button is shown in the header.
• canReorder: boolean | ((columnBeingReordered: Column<T>, fromIndex: number, insertionIndex: number, columns: readonly Column<T>[]) => boolean) - Determines if the column can be moved.
• thClassName: string - Class name for the header cell.
• tdClassName: string | ((item: T, index: number, items: readonly T[]) => string | undefined) - Class name for the data cell.