GretTech
Back to Components

Advanced Data Table

popularity exchange marketplace

A highly interactive data table with sorting, filtering, row selection, pagination, and bulk actions.

Props

PropTypeDefaultDescription
columns
ColumnDef<TData, TValue>[]-The columns definition for the data table.
data
TData[]-The data array to render in the table.
loading
booleanfalseShow skeleton loading rows.
noDataMessage
ReactNode"No results."Message shown when no rows are available.
onRowClick
(row: TData) => void-Callback when a row is clicked.
enableRowSelection
booleanfalseEnable row selection checkboxes.
onSelectionChange
(selectedRows: TData[]) => void-Callback when selection changes.
enableSearch
booleanfalseEnable built-in global search filter.
searchPlaceholder
string"Search..."Placeholder text for the search input.
searchValue
string-Controlled search value.
onSearchChange
(value: string) => void-Callback when search input changes.
searchColumn
string-Controlled search column.
onSearchColumnChange
(column: string) => void-Callback when search column changes.
searchHints
Record<string, string>-Optional dictionary of hints for specific columns in the search bar.
enablePagination
boolean-Enable client-side pagination with page size selector.
defaultPageSize
number-Default page size.
pageSizeOptions
number[]-Page size options shown in selector.
serverPagination
object-Server-side pagination configuration.
pageCount
number-Total number of pages available.
pageIndex
number-Current page index (0-based).
pageSize
number-Number of rows per page.
onPaginationChange
(updater) => void-Callback when pagination changes.
toolbarPrefix
ReactNode-Content shown before the column toggle in the toolbar.
toolbarSuffix
ReactNode-Content shown after the column toggle in the toolbar.
skeletonRows
number5Number of skeleton rows shown during loading.

Usage Examples

Simplified Table

import { DataTable } from "@/components/ui/data-table-advanced";
import { SortableHeader } from "@/components/ui/data-table-advanced";
import { Badge } from "@/components/ui/badge";
import { ColumnDef, Row } from "@tanstack/react-table";
type UserData = {
  name: string;
  status: string;
};
export default function SimplifiedExample() {
  const columns: ColumnDef<UserData>[] = [
    { 
      header: ({ column }) => <SortableHeader column={column} title="User" />, 
      accessorKey: "name",
    },
    { 
      header: "Status", 
      accessorKey: "status",
      cell: ({ row }: { row: Row<UserData> }) => <Badge>{row.getValue("status")}</Badge>
    }
  ];
  const data: UserData[] = [
    { name: "John Doe", status: "Active" },
    { name: "Jane Smith", status: "Inactive" }
  ];
  return (
    <div className="w-full">
      <DataTable
        columns={columns}
        data={data}
        enableSearch={false}
        enablePagination={false}
        enableRowSelection={false}
        enableColumnVisibility={false}
      />
    </div>
  );
}

Key Features

  • Global search and filtering
  • Column sorting
  • Row selection and bulk actions
  • Pagination controls
  • Responsive layout