Context

The Datatable component is powered by an internal context system that encapsulates state management for core table functionality—such as column visibility, selected rows, drag-and-drop ordering, view metadata, and data source configuration.

At the heart of this system is the DataTableLensContextProvider, which wraps your table and injects configuration from the Lens view engine, as well as DatatableContextProvider, which handles table-level logic like column states and selections.

DataTableLensContextProvider

This is the high-level provider that connects your Datatable to:

• Lens-powered backend view configuration
• Filters and search state
• Column definitions, permissions, and identifier keys
• Row action validation
• DnD sensors
• Context-based view data like modals, scopes, etc.

It fetches view-specific configuration and initializes the core context once the backend has responded.

<DataTableLensContextProvider
  selectedItems={selected}
  onSelect={setSelected}
  classNames={...}
  viewId="user_view"
  rowActions={...}
>
  <DatatableList />
</DataTableLensContextProvider>

This is automatically handled by the Datatable component, so you typically don’t need to use this directly.

DatatableContextProvider

This internal provider sets up local state and configurations using values from Lens, including:

• Selection state
• Column pinning, order, and visibility
• Column resizing
• Drag-and-drop setup
• Row identifiers
• Class names and styling config

It exposes these values via DatatableContext.

Using useDataTableContext

To interact with internal table state (for example, selection or filters), use the context hook:

import { useDataTableContext } from "@/path-to-context";
 
const { selectedRows, setSelectedRows, filters, searchQuery } = useDataTableContext();

Common values available:

Custom Use Case Example

You can use the context to build custom controls around the table:

const TableToolbar = () => {
  const { searchQuery, filters, setSelectedRows } = useDataTableContext();
 
  return (
    <div className="flex items-center gap-2">
      <span className="text-muted-foreground">Search: {searchQuery}</span>
      <button onClick={() => setSelectedRows([])}>Clear Selection</button>
    </div>
  );
};