Display modes

Several features expose a *DisplayMode option that changes how the UI is presented without changing the underlying behavior. Each defaults to the current look, so setting them is always opt-in.

Pagination display mode

paginationDisplayMode controls the pagination control style:

• "default" — a start–end of total range label with first / previous / next / last buttons.
• "pages" — numbered page buttons (with previous / next and collapsed ellipses for long ranges).
• "custom" — renders nothing; supply your own via renderBottomToolbarCustomActions.

const table = useDataTable({
  data,
  columns,
  paginationDisplayMode: "pages",
})

Column filter display mode

columnFilterDisplayMode controls where per-column filter inputs live:

• "subheader" — a filter row beneath the header (toggled by the toolbar funnel button).
• "popover" — a filter button on each filterable column header that opens the filter in a popover. The toolbar funnel and the "filter by" menu item are hidden in this mode.
• "custom" — neither is rendered; supply your own filter UI per column via meta.renderColumnFilter.

const table = useDataTable({
  data,
  columns,
  columnFilterDisplayMode: "popover",
})

Create display mode

createDisplayMode decouples the create form from editDisplayMode:

• "modal" — the create form opens in a dialog (default).
• "row" — an inline editable row appears at the top of the table, with Save / Cancel beneath it.
• "custom" — nothing is rendered; build your own UI from the isCreating / rowDraft instance state.

const table = useDataTable({
  data,
  columns,
  enableEditing: true,
  createDisplayMode: "row",
  onCreateRow: ({ values, exit }) => {
    // persist the new row, then:
    exit()
  },
})

// trigger the create form from a toolbar action:
// table.cnTable.beginCreate()

Relevant options

Related

• Editing
• Column filtering
• Toolbar customization
• useDataTable options