Custom Rows

PreviewCopy Anchor Link

UsageCopy Anchor Link

Columns suit data you compare across rows. When each row is more of a card (an icon, a title, a line of description and a switch), pass renderRow instead of columns. The Data Table draws your layout across the full width of the row and still handles search, filters, pagination and the empty state.

<ContentDataTable
  id="plugins-table"
  renderRow={({ row }) => (
    <PluginRow plugin={row} />
  )}
  edges={data.edges}
  pageInfo={data.pageInfo}
  order={{ defaultOrder: { column: 'name', order: 'asc' } }}
/>

• No column headers. A custom row has no columns to label, so the header band is hidden. It comes back when you turn on bulkActions, expandable or reorderable, because their controls live there.
• Row features still work. The checkbox, the expand chevron and the drag handle sit in front of your layout, and rowOpens makes the whole row clickable.
• Controls answer for themselves. A click on a button, link or switch inside your layout does not trigger rowOpens.
• Your layout owns its spacing. The cell already has the row's padding, so don't add outer padding of your own.

APICopy Anchor Link

Want those rows sorted into categories? Combine renderRow with grouped rows.