Density

Density controls the vertical padding of table rows. The data table ships three densities: "comfortable" (the default), "compact", and "spacious". A toolbar button cycles through them, so end users can pick the row height that suits them.

Usage

Set the initial density with defaultDensity:

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  defaultDensity: "compact",
})

return <DataTable table={table} />

Reading and setting density

You can read or change the current density at any time through the table instance:

// current density: "comfortable" | "compact" | "spacious"
const density = table.cnTable.density

// switch to compact programmatically
table.cnTable.setDensity("compact")

This is handy when you want to drive density from your own controls instead of the built-in toolbar button.

Hiding the toolbar button

Each toolbar control can be hidden individually. Pass enableDensityToggle: false to drop the density button (for example when you drive density from your own UI), or enableFullscreenToggle: false to drop the full-screen button:

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  enableDensityToggle: false,
  enableFullscreenToggle: false,
})

The other toolbar options have their own flags too: enableGlobalFilter, enableColumnFilters, enableColumnActions, and enableExport. To remove the entire top toolbar, use enableTopToolbar: false.

Related

• Table instance