Data Table

A powerful and flexible data table component for displaying, filtering, sorting, and paginating tabular data.

Reference the TanStack Table Column Definitions Guide for detailed column definition guide.

Features

Advanced Filtering - Multiple filter types (text, number, date, select, multi-select) with customizable operators

URL State Management - Sync table state with URL search params using nuqs

Sorting - Multi-column sorting with persistent state

Pagination - Server-side or client-side pagination with customizable page sizes

Column Visibility - Toggle column visibility with view options menu

Row Selection - Single or multi-row selection with action bar

Column Pinning - Pin columns to left or right for better UX

Keyboard Navigation - Full keyboard support with shortcuts for filter and sort menus

Responsive - Mobile-first design with overflow handling

Customizable - Flexible API for custom filters, columns, and actions

Layout

Import all components and combine them:

import {
  DataTable,
  DataTableToolbar,
  DataTableAdvanceFilter,
  useDataTable
} from "kombase";

const { table } = useDataTable({
  data,
  columns,
  pageCount,
});

// With standard toolbar
<DataTable table={table}>
  <DataTableToolbar table={table} />
</DataTable>

// With advanced filter toolbar
<DataTable table={table}>
  <DataTableToolbar hideFilter table={table}>
    <DataTableAdvanceFilter table={table} />
  </DataTableToolbar>
</DataTable>

// Add custom actions on the right side of the toolbar
<DataTable table={table}>
  <DataTableToolbar
    table={table}
    actions={
      <Button size="icon" variant="outline">
        <RefreshCw />
      </Button>
    }
  />
</DataTable>

Walkthrough

Define columns with appropriate metadata:

import { Text, CalendarIcon, DollarSign } from "lucide-react";
import { DataTableColumnHeader } from "kombase";

const columns = React.useMemo(() => [
  {
    // Enter a unique ID; this is used as the query key for the column filter
    id: "username", 
    accessorFn: (row) => row.username,
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Title" />
    ),
    cell: ({ row }) => <div>{row.getValue("title")}</div>,
    // Meta options for columns for sorting, filtering, and display options.
    meta: { 
      label: "Username", 
      placeholder: "Search username...", 
      variant: "text", 
      icon: Text, 
    }, 
    // By default is `false`; set this to `true` to enable filtering.
    enableColumnFilter: true, 
  },
], []);

Initialize the table state using the useDataTable hook:

import { useDataTable } from "kombase";

function TableDemo() {
  const { table } = useDataTable({
    data,
    columns,
    // Enter the total number of pages
    pageCount, 
    initialState: {
      pagination: { pageIndex: 0, pageSize: 10 },
      sorting: [{ desc: true, id: 'createdAt' }],
    },
    // Unique identifier for rows, can be used for unique row selection
    getRowId: (row) => row.id, 
  });

  return (
    // ... render table
  );
}

Pass the table instance to the DataTable, and DataTableToolbar components:

import { DataTable, DataTableToolbar } from "kombase";

function DataTableDemo() {
  return (
    <DataTable table={table}>
      <DataTableToolbar
        table={table}
        actions={
          <Button size="icon" variant="outline">
            <RefreshCw />
          </Button>
        }
      />
    </DataTable>
  );
}

Render an action bar on row selection:

import { ActionBar } from "@/components/ui/action-bar";

function TableActionBar({ table }: { table: Table<Data> }) {
  const rows = table.getFilteredSelectedRowModel().rows;

  const onOpenChange = React.useCallback((open: boolean) => {
    if (!open) {
      table.toggleAllRowsSelected(false);
    }
  },
  [table],
);

  return (
    <ActionBar open={rows.length > 0} onOpenChange={onOpenChange}>
      {/* Add your custom actions here */}
    </ActionBar>
  );
}

function DataTableDemo() {
  return (
    <DataTable
      table={table}
      actionBar={<TableActionBar table={table} />}
    >
      <DataTableToolbar table={table} />
    </DataTable>
  );
}

useDataTable

A hook for initializing the data table with state management.

Overview

The useDataTable hook acts as an intelligent wrapper around useReactTable from @tanstack/react-table. It seamlessly handles:

Server-side pagination, sorting, and filtering

Controlled or uncontrolled state for page and page size

Debounced column filter updates (defaults to 300ms) to prevent excessive API calls

Row selection and column visibility management

Import

import { useDataTable } from "kombase";

Usage

Basic Setup

First, define your columns. Use the meta property to configure filter behaviors.

import { useMemo, useState } from "react";
import { useDataTable, DataTable, DataTableColumnHeader } from "kombase";
import type { ColumnDef } from "@tanstack/react-table";

function useInvoiceColumns(): ColumnDef<Invoice>[] {
  return useMemo(
    () => [
      {
        accessorFn: (row) => row.invoice_id,
        id: "invoice_id",
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Invoice ID" />
        ),
        enableColumnFilter: true,
        enableHiding: false,
        enableSorting: false,
        size: 150,
        meta: {
          label: "Invoice ID",
          placeholder: "Search invoice ID...",
          variant: "text",
        },
      },
      {
        accessorKey: "amount",
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Amount" />
        ),
      },
    ],
    [],
  );
}

Controlled Pagination (Recommended for API integrations)

When fetching data from an external API, it's highly recommended to control the pagination state externally.

function InvoiceTable() {
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);

  // Fetch data from your API utilizing the page & limit variables
  const { data, meta } = useQuery({
    queryKey: ["invoices", page, limit],
    queryFn: () => fetchInvoices({ page, limit }),
  });

  const columns = useInvoiceColumns();

  const { table } = useDataTable({
    columns,
    data: data?.data ?? [],
    getRowId: (row) => row.invoice_id,
    pageCount: meta?.total_pages ?? 0,
    // Controlled pagination props
    page,
    perPage: limit,
    onPageChange: setPage,
    onPerPageChange: (newLimit) => {
      setLimit(newLimit);
      setPage(1); // Reset to the first page when the limit changes
    },
  });

  return <DataTable table={table} />;
}

Uncontrolled Pagination

If you don't provide page, perPage, or onPageChange, the hook will manage the state internally.

import * as React from "react";
import { useInfiniteQuery } from "@tanstack/react-query";
import { DataTable, useDataTable } from "kombase";

function InfiniteScrollTable() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
  } = useInfiniteQuery({
    queryKey: ["items"],
    queryFn: ({ pageParam = 1 }) => fetchItems({ page: pageParam }),
    initialPageParam: 1,
    getNextPageParam: (lastPage) => lastPage.nextPage ?? undefined,
  });

  // Flatten the pages from TanStack Query into a single 1D array
  const flatData = React.useMemo(
    () => data?.pages.flatMap((page) => page.data) ?? [],
    [data]
  );

  const columns = useItemColumns();

  const { table } = useDataTable({
    columns,
    data: flatData,
    pageCount: -1, // pageCount is not needed for infinite scroll
  });

  return (
    <DataTable
      table={table}
      stickyHeader
      onEndReached={() => {
        if (hasNextPage && !isFetchingNextPage) {
          fetchNextPage();
        }
      }}
      isLoading={isLoading || isFetchingNextPage}
    />
  );
}

Column Filtering

Column filtering is enabled by setting enableColumnFilter: true in your column definitions. You can configure column filtering in three different modes:

1. Controlled Column Filtering (Standard SSR / Server-Side Filtering)

In standard server-side filtering (SSR), each column filter maps to its own direct URL query parameter (e.g. ?search=xyz&status=paid,pending).

By passing filterValues and onFilterValuesChange to useDataTable, the table becomes a fully controlled component synced with your URL parameters. When a user types in a text filter or checks a faceted filter:

The table automatically triggers onColumnFiltersChange (with built-in debounce for text inputs).

It calls onFilterValuesChange with the updated keys and values.

You write the updates back to the URL search params, which triggers a reload/fetch.

Here is a complete step-by-step walkthrough for React Router v7 / Remix:

Step-by-Step Implementation

Read URL Params: Read the active parameters using useSearchParams.

Configure useDataTable: Pass the parsed values to filterValues and handle state updates in onFilterValuesChange.

Reset Page on Filter Change: Always reset the page parameter to 1 when filters are modified to prevent displaying empty pages.

Fetch Data: Pass the active URL parameters directly to your backend API fetching hook.

Code Example

import { useSearchParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { DataTable, DataTableToolbar, DataTablePagination, useDataTable } from "kombase";

function InvoicesTable() {
  const [searchParams, setSearchParams] = useSearchParams();
  
  // 1. Read parameters from URL
  const page = Number(searchParams.get("page")) || 1;
  const perPage = Number(searchParams.get("per_page")) || 10;
  const search = searchParams.get("search") || "";
  const status = searchParams.get("status") || "";

  // 2. Fetch data from API using URL params
  const { data, isLoading } = useQuery({
    queryKey: ["invoices", { page, perPage, search, status }],
    queryFn: () => fetchInvoices({ page, per_page: perPage, search, status }),
  });

  // 3. Define the controlled table state
  const { table } = useDataTable({
    columns,
    data: data?.items ?? [],
    pageCount: data?.meta?.last_page ?? 1,
    page,
    perPage,
    manualFiltering: true, // Tell TanStack Table we are filtering server-side
    manualPagination: true,
    
    // Pass active filters from URL to the table UI
    filterValues: {
      search,
      status: status ? status.split(",") : [],
    },
    
    // Sync table UI updates back to the URL
    onFilterValuesChange: (updates) => {
      const newParams = new URLSearchParams(searchParams);
      
      // Reset page to 1 whenever filters change
      newParams.set("page", "1");

      if ("search" in updates) {
        if (updates.search) {
          newParams.set("search", updates.search);
        } else {
          newParams.delete("search");
        }
      }

      if ("status" in updates) {
        const statusVal = updates.status;
        if (Array.isArray(statusVal) && statusVal.length > 0) {
          newParams.set("status", statusVal.join(","));
        } else {
          newParams.delete("status");
        }
      }

      setSearchParams(newParams, { replace: true });
    },
    
    // Sync pagination changes to the URL
    onPageChange: (newPage) => {
      const newParams = new URLSearchParams(searchParams);
      newParams.set("page", String(newPage));
      setSearchParams(newParams);
    },
    onPerPageChange: (newPerPage) => {
      const newParams = new URLSearchParams(searchParams);
      newParams.set("per_page", String(newPerPage));
      newParams.set("page", "1"); // Reset page when changing page size
      setSearchParams(newParams);
    }
  });

  return (
    <>
      <DataTable table={table} loading={isLoading}>
        <DataTableToolbar table={table} />
      </DataTable>
      <DataTablePagination table={table} />
    </>
  );
}

2. Client-Side Column Filtering (Without URL parameters)

If you just want local in-memory filtering in the browser without query parameters:

Fetch all data from the database at once.

Set manualFiltering: false.

Do not pass filterValues or onFilterValuesChange.

const { table } = useDataTable({
  columns,
  data: allItems,
  manualFiltering: false, // Filtered locally in the browser by TanStack Table
  pageCount: 1,
});

3. API Parameter Helper: `resolveFiltersToFlatParams`

When integrating with server-side processing, frontend filter states (like TanStack Column Filters) need to be serialized into query parameters matching your backend API specification.

Instead of writing manual mapper functions for every column, the built-in resolveFiltersToFlatParams utility automatically converts an array of ExtendedColumnFilter objects into a flat key-value query object. It supports various backend filter styles (Nested, Django, PostgREST, MongoDB, etc.), range decomposition, and customizable array formatting out of the box.

Import

import { resolveFiltersToFlatParams, mapDateFilterToParams } from "kombase";

Configuration Options

The helper accepts a second argument config of type FilterResolutionConfig:

Property	Type	Description
`style`	`'flat' \| 'suffix' \| 'django' \| 'nested' \| 'prefix' \| 'postgrest' \| 'custom'`	Naming/structure convention for query keys. Default is `'flat'`.
`operatorMap`	`Partial<Record<FilterOperator, string>>`	Custom mapping of operators to backend representation (e.g., `{ inArray: 'in' }`).
`arrayFormat`	`'comma' \| 'repeat' \| 'brackets'`	Formats multi-select array values (e.g., `comma` -> `a,b`, `repeat` -> `[a, b]`, `brackets` -> `status[]=[a,b]`). Default is `'comma'`.
`dateFormat`	`string`	Custom date formatting string (dayjs). Default is `'YYYY-MM-DD'`.
`flatRangeSuffix`	`[string, string]`	Suffixes for start/end in range queries when style is `flat`. Default is `['_min', '_max']` for numbers and `['_start', '_end']` for dates.
`formatFilter`	`Function`	Custom hook to manually format any parameter key-value pair.
`joinParamName`	`string`	Parameter key to represent the logical join operator (e.g. `_join` -> `?_join=or`).
`joinOperator`	`'and' \| 'or'`	Active logical join operator.
`columnOptionsMap`	`Record<string, string[]>`	Valid options for computing complement arrays (for `ne` / `notInArray`) on flat APIs.
`paramNameMap`	`Record<string, string>`	Rename parameter keys (e.g. `{ ticket_status: "status" }`).
`customMappers`	`Partial<Record<keyof TData, (value: any, operator: FilterOperator) => Partial<TParams>>>`	Per-column custom serializer overrides.

Guide: Backend Query Styles

Let's assume we have a filter on the column age with a value of 18 and the operator is gte (Greater than or equal). Here is how each style configuration formats the query parameter:

Style Name	Parameter Structure	Output Example	Typical Backend / Target Framework
`flat`	`key=value`	`?age=18`	Express, Laravel (Simple query mapping)
`suffix`	`key_operator=value`	`?age_gte=18`	Custom REST APIs, Django (legacy / flat)
`django`	`key__operator=value`	`?age__gte=18`	Django ORM / Django Filter
`nested`	`key[operator]=value`	`?age[gte]=18`	Ruby on Rails, NestJS (TypeORM), Strapi, Koa
`prefix`	`key[$operator]=value`	`?age[$gte]=18`	FeathersJS, MongoDB Query Syntax
`postgrest`	`key=operator.value`	`?age=gte.18`	PostgREST, Supabase REST API

[!TIP] If style is 'flat' (default), operators are omitted in the keys (except for isEmpty/isNotEmpty which generates key_is_empty=true/false). For other styles, operators are automatically mapped and embedded.

Guide: Range Filters Decomposition (`isBetween`)

When a developer uses a numeric range (like a slider) or a date range picker, the table filter outputs an operator isBetween with an array value: [minValue, maxValue].

resolveFiltersToFlatParams handles this intelligently based on the chosen style:

For Flat Style (style: 'flat'):

Numeric Range: Decomposes into _min and _max keys. { price: [10, 50] } $\rightarrow$ ?price_min=10&price_max=50
Date Range: Decomposes into _start and _end keys. { createdAt: ['2023-01-01', '2023-01-31'] } $\rightarrow$ ?createdAt_start=2023-01-01&createdAt_end=2023-01-31
You can customize these suffixes globally using flatRangeSuffix: ['_min_suffix', '_max_suffix'].

For Non-Flat Styles (e.g. nested, suffix, postgrest):

The helper automatically decomposes isBetween into two separate operations: gte (start) and lte (end), then formats them according to the style rules:
- style: 'nested' $\rightarrow$ ?price[gte]=10&price[lte]=50
- style: 'suffix' $\rightarrow$ ?price_gte=10&price_lte=50
- style: 'postgrest' $\rightarrow$ { price: ['gte.10', 'lte.50'] } (which gets parsed as ?price=gte.10&price=lte.50)

Guide: Array Formatting for Multi-Select (`arrayFormat`)

For columns that support selecting multiple values (e.g., status: ['active', 'inactive']), you can configure how the array values are sent to your API using arrayFormat:

comma (Default): Combines elements into a single comma-separated string.

Output: ?status=active,inactive

repeat: Generates a standard JavaScript array value, which standard query-string serializers repeat.

Output: ?status=active&status=inactive

brackets: Appends [] to the key name.

Output: ?status[]=active&status[]=inactive

Guide: Negation Filtering & `columnOptionsMap`

When a developer uses a negation filter (such as "Is not" or "Has none of"), the helper resolves it differently depending on your API structure:

For Flat Style (style: 'flat'):

Flat APIs typically do not understand operators like ne or notIn.
To support these, you must provide the list of all available options for that column via columnOptionsMap.
The helper will compute the options complement at frontend-level (e.g. if status options are ['A', 'B', 'C'] and you exclude 'A', the helper sends ?status=B,C).

For Non-Flat Styles (e.g. nested, suffix, postgrest):

Standard backends support negation natively (e.g., status[ne]=pending or status=neq.pending).
Therefore, you do not need columnOptionsMap for these styles. You can safely omit it, and the helper will map the negative operator directly into the query key/value.

Usage Examples

1. Rails / NestJS (Nested Brackets style)

const apiParams = useMemo(() => {
  return {
    ...resolveFiltersToFlatParams(filters, {
      style: "nested",
      arrayFormat: "brackets", // generates: status[in][]=active&status[in][]=inactive
      dateFormat: "YYYY-MM-DD",
    }),
    page,
    perPage,
  };
}, [filters, page, perPage]);

2. Django style API

const apiParams = useMemo(() => {
  return {
    ...resolveFiltersToFlatParams(filters, {
      style: "django",
      operatorMap: {
        inArray: "in",
        notInArray: "notin",
      },
    }),
    page,
  };
}, [filters, page]);

3. PostgREST / Supabase API

const apiParams = useMemo(() => {
  return {
    ...resolveFiltersToFlatParams(filters, {
      style: "postgrest",
    }),
    page,
  };
}, [filters, page]);

4. Fully Custom Hook Override

If your backend requires a very unique format, you can intercept the format logic:

const apiParams = useMemo(() => {
  return resolveFiltersToFlatParams(filters, {
    formatFilter: (paramName, operator, value, backendOp) => {
      // Return custom flat key-value pairs
      return { [`api_filter_${paramName}_${backendOp}`]: value };
    },
  });
}, [filters]);

Props

The useDataTable hook accepts the following properties.

Prop

Type

Returns

The useDataTable hook returns an object with the following properties.

Prop

Type

Column Meta for Filter Variant

Utilize the meta property in your column definitions to configure the UI representation of the filter:

meta: {
  label: 'Status',
  variant: 'select',    // Accepts: 'text' | 'select' | 'multiSelect' | 'date' | 'range' | 'boolean'
  options: [
    { label: 'Paid', value: 'paid' },
    { label: 'Pending', value: 'pending' },
  ],
}

Loading State (DataTableSkeleton)

DataTableSkeleton is used to display a loading skeleton that strictly matches the actual layout of the data table. This is extremely useful when combined with React.Suspense or when awaiting data from an API.

Skeleton Usage

import { DataTableSkeleton } from "kombase";

function MyTableSkeleton() {
  return (
    <DataTableSkeleton
      columnCount={7}
      rowCount={10}
      filterCount={2}
      shrinkZero
    />
  );
}

Suspense Integration

The recommended pattern when using frameworks like Next.js or React Router v7 with asynchronous data fetching:

import { Suspense } from "react";
import { DataTableSkeleton } from "kombase";

function Page() {
  return (
    <div className="p-6">
      <Suspense fallback={<DataTableSkeleton columnCount={5} rowCount={10} />}>
        <MyDataTableContainer />
      </Suspense>
    </div>
  );
}

Skeleton Props

Prop	Type	Default	Description
`columnCount`	`number`	—	Required. The number of columns the skeleton should render.
`rowCount`	`number`	`10`	The number of row skeletons to display.
`filterCount`	`number`	`0`	The number of filter skeleton boxes to display in the top toolbar.
`cellWidths`	`string[]`	`['auto']`	An array of column widths (e.g., `['100px', '200px']`).
`withViewOptions`	`boolean`	`true`	Whether to render the skeleton for the column visibility toggle button.
`withPagination`	`boolean`	`true`	Whether to render the skeleton for the bottom pagination controls.
`shrinkZero`	`boolean`	`false`	If `true`, columns will possess a `min-width` matching their respective `cellWidths`.
`className`	`string`	—	Custom CSS class for the main container.

API Reference

DataTable Props

Props for the main <DataTable /> component:

Prop	Type	Default	Description
`table`	`Table<TData>`	—	Required. The table instance returned by `useDataTable`.
`actionBar`	`React.ReactNode`	—	Optional action bar component to display when rows are selected.
`wrapperClassname`	`string`	—	Custom className for the table's scrollable wrapper container.
`emptyState`	`React.ReactNode`	`'No results.'`	Custom content (string or ReactNode) to show when the table has no records.
`stickyHeader`	`boolean`	`false`	If `true`, the table header will stick to the top of the container during vertical scroll.
`onEndReached`	`() => void`	—	Callback function triggered when scrolling near the bottom of the table wrapper (infinite scroll).
`isLoadingMore`	`boolean`	`false`	Used with `onEndReached` to prevent duplicate load requests when fetching more data.
`loading`	`boolean \| React.ReactNode`	`false`	Display a blur overlay and spinner in the center of the table (initial load).
`isLoading`	`boolean`	`false`	Deprecated. Use `isLoadingMore` instead.
`endReachedThreshold`	`number`	`100`	The distance (in pixels) from the bottom of the container to trigger the `onEndReached` callback.

DataTablePagination Props

Props for the <DataTablePagination /> component:

Prop	Type	Default	Description
`table`	`Table<TData>`	—	Required. The table instance returned by `useDataTable`.
`pageSizeOptions`	`number[]`	`[10, 20, 30, 40, 50]`	Options for the page size select dropdown.
`showPageNumbers`	`boolean`	`true`	Whether to show the "Rows per page" text and the current page info.
`rowsPerPageText`	`React.ReactNode`	`'Rows per page'`	Custom text or ReactNode to display next to the page size select dropdown.
`pageText`	`(page: number, total: number) => React.ReactNode`	—	Custom formatting function to render the current page status text (e.g. "Page X of Y").

Column Definitions

The column definitions are used to define the columns of the data table.

const columns = React.useMemo<ColumnDef<Project>[]>(
  () => [
    {
      // Required: Unique identifier for the column
      id: "title", 
      // Required: Key to access the data, `accessorFn` can also be used
      accessorKey: "title", 
      // Optional: Custom header component
      header: ({ column }) => (
        <DataTableColumnHeader column={column} title="Title" />
      ),
      // Optional: Custom cell component
      cell: ({ row }) => <div>{row.getValue("title")}</div>,
      // Optional: Meta options for filtering, sorting, and view options
      meta: {
        label: "Title",
        placeholder: "Search titles...",
        variant: "text",
        icon: Text,
      },
      // By default, the column will not be filtered. Set to `true` to enable filtering.
      enableColumnFilter: true, 
    },
    {
      id: "status",
      // Access nested data using `accessorFn`
      accessorFn: (row) => row.lineItem.status,
      header: "Status",
      meta: {
        label: "Status",
        variant: "select",
        options: [
          { label: "Active", value: "active" },
          { label: "Inactive", value: "inactive" },
        ],
      },
      enableColumnFilter: true,
    },
  ],
  [],
);

Properties

Core configuration options for defining columns.

Prop	Description
`id`	Required: Unique identifier for the column
`accessorKey`	Required: Key to access the data from the row
`accessorFn`	Optional: Custom accessor function to access data
`header`	Optional: Custom header component with column props
`cell`	Optional: Custom cell component with row props
`meta`	Optional: Meta options for accessing column metadata
`enableColumnFilter`	By default, the column will not be filtered. Set to `true` to enable filtering
`enableSorting`	Enable sorting for this column
`enableHiding`	Enable column visibility toggle

Column Meta

Column meta options for filtering, sorting, and view options.

Prop	Description
`label`	The display name for the column
`placeholder`	The placeholder text for filter inputs
`variant`	The type of filter to use (`text`, `number`, `select`, etc.)
`options`	For select/multi-select filters, an array of options with `label`, `value`, and optional `count` and `icon`
`loading`	For select/multi-select filters, whether the options are currently loading from an API (displays a spinner loader)
`range`	For range filters, a tuple of `[min, max]` values
`unit`	For numeric filters, the unit to display (e.g., 'hr', '$')
`icon`	The react component to use as an icon for the column
`presets`	For `dateRange` filters, a boolean to enable the default quick selection presets panel or an array of custom `DatePreset` objects
`align`	The alignment of the column content and header (`left`, `center`, `right`)
`thClass`	Additional CSS class names to apply to the table header cell (`<TableHead>`)
`cellClass`	Additional CSS class names to apply to the table body cell (`<TableCell>`)

Filter Variants

Available filter variants for column meta.

Title	Description
`text`	Text search with contains, equals, etc.
`number`	Numeric filters with equals, greater than, less than, etc.
`range`	Range filters with minimum and maximum values
`date`	Date filters with equals, before, after, etc.
`dateRange`	Date range filters with start and end dates
`boolean`	Boolean filters with true/false values
`select`	Single-select filters with predefined options
`multiSelect`	Multi-select filters with predefined options

				Status	Role	Created At
citlalli_spinka	Citlalli Spinka	citlalli29@hotmail.com	+18176914076	inactive	superadmin	Mo LLL y
taurean_stark	Taurean Stark	taurean_turner72@gmail.com	+14237063140	inactive	admin	Sa LLL y
efrain_schuster50	Efrain Schuster	efrain_paucek81@gmail.com	+13952948130	active	admin	Fr LLL y
jill.mosciski	Jill Mosciski	jill65@yahoo.com	+17002257703	active	cashier	We LLL y
unique.bayer41	Unique Bayer	unique68@yahoo.com	+14203368951	active	cashier	Sa LLL y
maryann.lubowitz44	Maryann Lubowitz	maryann37@hotmail.com	+15015139631	inactive	admin	Tu LLL y
christopher.runolfsson	Christopher Runolfsson	christopher1@hotmail.com	+12688106049	active	admin	Fr LLL y
eda_lebsack	Eda Lebsack	eda_little@hotmail.com	+12618535627	invited	admin	Mo LLL y
eleanor_kerluke58	Eleanor Kerluke	eleanor_gottlieb@hotmail.com	+18013288238	active	cashier	Sa LLL y
vince_fritsch98	Vince Fritsch	vince.corwin18@yahoo.com	+18055136159	active	admin	Fr LLL y

				Status	Role	Created At
citlalli_spinka	Citlalli Spinka	citlalli29@hotmail.com	+18176914076	inactive	superadmin	Mo LLL y
taurean_stark	Taurean Stark	taurean_turner72@gmail.com	+14237063140	inactive	admin	Sa LLL y
efrain_schuster50	Efrain Schuster	efrain_paucek81@gmail.com	+13952948130	active	admin	Fr LLL y
jill.mosciski	Jill Mosciski	jill65@yahoo.com	+17002257703	active	cashier	We LLL y
unique.bayer41	Unique Bayer	unique68@yahoo.com	+14203368951	active	cashier	Sa LLL y
maryann.lubowitz44	Maryann Lubowitz	maryann37@hotmail.com	+15015139631	inactive	admin	Tu LLL y
christopher.runolfsson	Christopher Runolfsson	christopher1@hotmail.com	+12688106049	active	admin	Fr LLL y
eda_lebsack	Eda Lebsack	eda_little@hotmail.com	+12618535627	invited	admin	Mo LLL y
eleanor_kerluke58	Eleanor Kerluke	eleanor_gottlieb@hotmail.com	+18013288238	active	cashier	Sa LLL y
vince_fritsch98	Vince Fritsch	vince.corwin18@yahoo.com	+18055136159	active	admin	Fr LLL y

Data Table

On this page