Configuration Overview

The DataTable component is highly configurable through the config prop. This guide covers all available configuration options and their use cases.

Basic Configuration

<DataTable
  getColumns={getColumns}
  fetchDataFn={useUsersData}
  idField="id"
  config={{
    enableRowSelection: true,
    enableSearch: true,
    enableDateFilter: true,
    enableColumnVisibility: true,
    enableUrlState: true,
    defaultSortBy: "created_at",
    defaultSortOrder: "desc",
  }}
/>

Configuration Options Reference

Feature Toggles

Prop

Type

Sorting Configuration

Prop

Type

Sorting Example

config={{
  defaultSortBy: "created_at",   // Sort by creation date
  defaultSortOrder: "desc",      // Newest first
}}

Important: The defaultSortBy value must exactly match a column's accessorKey:

// Column definition
{
  accessorKey: "created_at",  // ✅ Use this value
  header: "Created Date",
}

// Configuration
config={{
  defaultSortBy: "created_at",  // ✅ Matches accessorKey
}}

Search Configuration

Prop

Type

config={{
  enableSearch: true,
  searchPlaceholder: "Search by name, email, or ID...",
}}

Column Resizing

Prop

Type

config={{
  columnResizingTableId: "users-table",  // Saves column widths
}}

When provided, column sizes are automatically saved and restored.

Export Configuration

Prop

Type

config={{
  allowExportNewColumns: true,  // Export includes transformed data
}}

When true: Exports visible columns + new columns from transform function When false: Exports only visible table columns (strict mode)

UI Size

Prop

Type

config={{
  size: 'sm',  // Compact table UI
}}

Affects:

Pagination buttons
Page size selector
Toolbar buttons
Navigation controls

Complete Configuration Example

<DataTable<User, any>
  getColumns={getColumns}
  fetchDataFn={useUsersData}
  fetchByIdsFn={fetchUsersByIds}
  idField="id"
  pageSizeOptions={[10, 20, 50, 100]}
  exportConfig={useExportConfig()}
  onRowClick={handleRowClick}
  renderToolbarContent={({ selectedRows, resetSelection }) => (
    <ToolbarOptions
      selectedRows={selectedRows}
      resetSelection={resetSelection}
    />
  )}
  config={{
    // Features
    enableRowSelection: true,
    enableClickRowSelect: false,
    enableKeyboardNavigation: true,
    enableSearch: true,
    enableDateFilter: true,
    enableColumnVisibility: true,
    enableUrlState: true,

    // Sorting
    defaultSortBy: "created_at",
    defaultSortOrder: "desc",

    // Search
    searchPlaceholder: "Search users by name or email...",

    // Column Resizing
    columnResizingTableId: "users-table",

    // Export
    allowExportNewColumns: true,

    // UI
    size: 'default',
  }}
/>

Configuration Patterns

Read-Only Table

For display-only tables without editing:

config={{
  enableRowSelection: false,  // No checkboxes
  enableSearch: true,
  enableColumnVisibility: true,
  enableUrlState: true,
}}

Minimal Table

Simplest configuration for basic use:

config={{
  enableRowSelection: false,
  enableSearch: false,
  enableDateFilter: false,
  enableColumnVisibility: false,
  enableUrlState: false,
}}

Admin Table

Full-featured configuration for admin interfaces:

config={{
  enableRowSelection: true,
  enableClickRowSelect: true,
  enableKeyboardNavigation: true,
  enableSearch: true,
  enableDateFilter: true,
  enableColumnVisibility: true,
  enableUrlState: true,
  defaultSortBy: "created_at",
  defaultSortOrder: "desc",
  searchPlaceholder: "Search across all fields...",
  columnResizingTableId: "admin-users-table",
  size: 'sm',  // Compact for dense data
}}

Next Steps

Column Configuration - Define and customize columns
Export Configuration - Configure data export options
URL State - Manage URL state persistence
Subrows Configuration - Enable hierarchical data

How is this guide?

Configuration

On this page