Density

Density controls the vertical padding of table rows and the padding around the toolbars. 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 initialState.density:

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  initialState: { density: "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.getState().density

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

This is handy when you want to drive density from your own controls instead of the built-in toolbar button. To show the current density in your component's render, add stateSelector: (state) => state.density (see State management).

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, and enableColumnActions. To remove the entire top toolbar, use enableTopToolbar: false.

Related