@plexui/ui 0.7.38 → 0.7.39

package/dist/es/components/DataTable/DataTable.js

@@ -9,7 +9,7 @@ import s from "./DataTable.module.css";
 const resolveUpdater = (updater, value) => {
     return typeof updater === "function" ? updater(value) : updater;
 };
-export const DataTable = ({ columns, data, globalFilter, onGlobalFilterChange, onRowClick, pageSize = 10, initialSorting, columnVisibility, onColumnVisibilityChange, enableRowSelection = false, rowSelection, onRowSelectionChange, getRowId, emptyMessage = "No results.", className, showPagination = true, }) => {
+export const DataTable = ({ columns, data, variant = "default", globalFilter, onGlobalFilterChange, onRowClick, pageSize = 10, initialSorting, columnVisibility, onColumnVisibilityChange, enableRowSelection = false, rowSelection, onRowSelectionChange, getRowId, emptyMessage = "No results.", className, showPagination = true, }) => {
     const [sorting, setSorting] = useState(initialSorting ?? []);
     const shouldPaginate = Number.isFinite(pageSize) && pageSize > 0;
     const handleGlobalFilterChange = onGlobalFilterChange
@@ -52,7 +52,7 @@ export const DataTable = ({ columns, data, globalFilter, onGlobalFilterChange, o
     const totalRows = table.getFilteredRowModel().rows.length;
     const hasPagination = shouldPaginate && totalRows > pageSize;
     const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1);
-    return (_jsxs("div", { className: clsx(s.DataTable, className), "data-clickable": onRowClick ? "" : undefined, children: [_jsx("div", { className: s.TableContainer, children: _jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableHead, { children: header.isPlaceholder
+    return (_jsxs("div", { className: clsx(s.DataTable, className), "data-variant": variant, "data-clickable": onRowClick ? "" : undefined, children: [_jsx("div", { className: s.TableContainer, children: _jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableHead, { children: header.isPlaceholder
                                         ? null
                                         : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx(TableBody, { children: rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: visibleColumnCount, className: s.EmptyCell, children: emptyMessage }) })) : (rows.map((row) => (_jsx(TableRow, { onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) })] }) }), showPagination && hasPagination && _jsx(DataTablePagination, { table: table })] }));
 };

package/dist/es/components/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EACL,UAAU,EACV,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,GAOd,MAAM,uBAAuB,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,CAAC,MAAM,wBAAwB,CAAA;AA6CtC,MAAM,cAAc,GAAG,CAAK,OAAmB,EAAE,KAAQ,EAAK,EAAE;IAC9D,OAAO,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAE,OAAyB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;AACpF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAS,EAChC,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,oBAAoB,EACpB,UAAU,EACV,QAAQ,GAAG,EAAE,EACb,cAAc,EACd,gBAAgB,EAChB,wBAAwB,EACxB,kBAAkB,GAAG,KAAK,EAC1B,YAAY,EACZ,oBAAoB,EACpB,QAAQ,EACR,YAAY,GAAG,aAAa,EAC5B,SAAS,EACT,cAAc,GAAG,IAAI,GACC,EAAE,EAAE;IAC1B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAe,cAAc,IAAI,EAAE,CAAC,CAAA;IAE1E,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,GAAG,CAAC,CAAA;IAEhE,MAAM,wBAAwB,GAAmC,oBAAoB;QACnF,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;YACV,oBAAoB,CAAC,cAAc,CAAC,OAAO,EAAE,YAAY,IAAI,EAAE,CAAC,CAAC,CAAA;QACnE,CAAC;QACH,CAAC,CAAC,SAAS,CAAA;IAEb,MAAM,4BAA4B,GAChC,wBAAwB;QACtB,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;YACV,wBAAwB,CAAC,cAAc,CAAC,OAAO,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC,CAAA;QAC3E,CAAC;QACH,CAAC,CAAC,SAAS,CAAA;IAEf,MAAM,wBAAwB,GAA8C,oBAAoB;QAC9F,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;YACV,oBAAoB,CAAC,cAAc,CAAC,OAAO,EAAE,YAAY,IAAI,EAAE,CAAC,CAAC,CAAA;QACnE,CAAC;QACH,CAAC,CAAC,SAAS,CAAA;IAEb,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,IAAI;QACJ,OAAO;QACP,KAAK,EAAE;YACL,OAAO;YACP,YAAY;YACZ,gBAAgB;YAChB,YAAY;SACb;QACD,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACvF,eAAe,EAAE,UAAU;QAC3B,oBAAoB,EAAE,wBAAwB;QAC9C,wBAAwB,EAAE,4BAA4B;QACtD,oBAAoB,EAAE,wBAAwB;QAC9C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS;QACvE,kBAAkB;QAClB,eAAe,EAAE,eAAe,EAAE;QAClC,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,mBAAmB,EAAE,mBAAmB,EAAE;QAC1C,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAC9E,CAAC,CAAA;IAEF,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAA;IACrC,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,MAAM,CAAA;IACzD,MAAM,aAAa,GAAG,cAAc,IAAI,SAAS,GAAG,QAAQ,CAAA;IAC5D,MAAM,kBAAkB,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;IAE5E,OAAO,CACL,eACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,oBACvB,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,aAE3C,cAAK,SAAS,EAAE,CAAC,CAAC,cAAc,YAC9B,MAAC,KAAK,eACJ,KAAC,WAAW,cACT,KAAK,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAC5C,KAAC,QAAQ,cACN,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACnC,KAAC,SAAS,cACP,MAAM,CAAC,aAAa;wCACnB,CAAC,CAAC,IAAI;wCACN,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,IAHrD,MAAM,CAAC,EAAE,CAIb,CACb,CAAC,IAPW,WAAW,CAAC,EAAE,CAQlB,CACZ,CAAC,GACU,EACd,KAAC,SAAS,cACP,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,KAAC,QAAQ,cACP,KAAC,SAAS,IAAC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,YAC3D,YAAY,GACH,GACH,CACZ,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAChB,KAAC,QAAQ,IAEP,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,YAE/D,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnC,KAAC,SAAS,cACP,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,IAD5C,IAAI,CAAC,EAAE,CAEX,CACb,CAAC,IAPG,GAAG,CAAC,EAAE,CAQF,CACZ,CAAC,CACH,GACS,IACN,GACJ,EACL,cAAc,IAAI,aAAa,IAAI,KAAC,mBAAmB,IAAC,KAAK,EAAE,KAAK,GAAI,IACrE,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type OnChangeFn,\n  type RowSelectionState,\n  type SortingState,\n  type Updater,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport clsx from \"clsx\"\nimport { useState, type ReactNode } from \"react\"\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"../Table\"\nimport { DataTablePagination } from \"./DataTablePagination\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTableProps<TData> = {\n  /** Column definitions following TanStack Table v8 ColumnDef API */\n  columns: ColumnDef<TData, unknown>[]\n  /** Data array to display */\n  data: TData[]\n  /** External search/filter string (controlled) */\n  globalFilter?: string\n  /** Callback when global filter changes */\n  onGlobalFilterChange?: (value: string) => void\n  /** Click handler for rows */\n  onRowClick?: (row: TData) => void\n  /** Number of rows per page. Set to 0 or Infinity to disable pagination.\n   * @default 10\n   */\n  pageSize?: number\n  /** Initial sorting state */\n  initialSorting?: SortingState\n  /** Controlled column visibility */\n  columnVisibility?: VisibilityState\n  /** Callback when column visibility changes */\n  onColumnVisibilityChange?: (visibility: VisibilityState) => void\n  /** Enable row selection checkboxes\n   * @default false\n   */\n  enableRowSelection?: boolean\n  /** Controlled row selection state */\n  rowSelection?: RowSelectionState\n  /** Callback when row selection changes */\n  onRowSelectionChange?: (selection: RowSelectionState) => void\n  /** Custom row ID accessor */\n  getRowId?: (row: TData) => string\n  /** Message shown when there are no rows\n   * @default \"No results.\"\n   */\n  emptyMessage?: ReactNode\n  /** Class applied to the outermost wrapper */\n  className?: string\n  /** Whether to show pagination controls. Auto-hidden when all rows fit.\n   * @default true\n   */\n  showPagination?: boolean\n}\n\nconst resolveUpdater = <T,>(updater: Updater<T>, value: T): T => {\n  return typeof updater === \"function\" ? (updater as (old: T) => T)(value) : updater\n}\n\nexport const DataTable = <TData,>({\n  columns,\n  data,\n  globalFilter,\n  onGlobalFilterChange,\n  onRowClick,\n  pageSize = 10,\n  initialSorting,\n  columnVisibility,\n  onColumnVisibilityChange,\n  enableRowSelection = false,\n  rowSelection,\n  onRowSelectionChange,\n  getRowId,\n  emptyMessage = \"No results.\",\n  className,\n  showPagination = true,\n}: DataTableProps<TData>) => {\n  const [sorting, setSorting] = useState<SortingState>(initialSorting ?? [])\n\n  const shouldPaginate = Number.isFinite(pageSize) && pageSize > 0\n\n  const handleGlobalFilterChange: OnChangeFn<string> | undefined = onGlobalFilterChange\n    ? (updater) => {\n        onGlobalFilterChange(resolveUpdater(updater, globalFilter ?? \"\"))\n      }\n    : undefined\n\n  const handleColumnVisibilityChange: OnChangeFn<VisibilityState> | undefined =\n    onColumnVisibilityChange\n      ? (updater) => {\n          onColumnVisibilityChange(resolveUpdater(updater, columnVisibility ?? {}))\n        }\n      : undefined\n\n  const handleRowSelectionChange: OnChangeFn<RowSelectionState> | undefined = onRowSelectionChange\n    ? (updater) => {\n        onRowSelectionChange(resolveUpdater(updater, rowSelection ?? {}))\n      }\n    : undefined\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      globalFilter,\n      columnVisibility,\n      rowSelection,\n    },\n    ...(shouldPaginate ? { initialState: { pagination: { pageIndex: 0, pageSize } } } : {}),\n    onSortingChange: setSorting,\n    onGlobalFilterChange: handleGlobalFilterChange,\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    onRowSelectionChange: handleRowSelectionChange,\n    getRowId: getRowId ? (originalRow) => getRowId(originalRow) : undefined,\n    enableRowSelection,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    ...(shouldPaginate ? { getPaginationRowModel: getPaginationRowModel() } : {}),\n  })\n\n  const rows = table.getRowModel().rows\n  const totalRows = table.getFilteredRowModel().rows.length\n  const hasPagination = shouldPaginate && totalRows > pageSize\n  const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1)\n\n  return (\n    <div\n      className={clsx(s.DataTable, className)}\n      data-clickable={onRowClick ? \"\" : undefined}\n    >\n      <div className={s.TableContainer}>\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(header.column.columnDef.header, header.getContext())}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {rows.length === 0 ? (\n              <TableRow>\n                <TableCell colSpan={visibleColumnCount} className={s.EmptyCell}>\n                  {emptyMessage}\n                </TableCell>\n              </TableRow>\n            ) : (\n              rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  onClick={onRowClick ? () => onRowClick(row.original) : undefined}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      {showPagination && hasPagination && <DataTablePagination table={table} />}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type OnChangeFn,\n  type RowSelectionState,\n  type SortingState,\n  type Updater,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport clsx from \"clsx\"\nimport { useState, type ReactNode } from \"react\"\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"../Table\"\nimport { DataTablePagination } from \"./DataTablePagination\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTableProps<TData> = {\n  /** Column definitions following TanStack Table v8 ColumnDef API */\n  columns: ColumnDef<TData, unknown>[]\n  /** Data array to display */\n  data: TData[]\n  /** Visual variant\n   * - `\"default\"` — borderless table with transparent header\n   * - `\"bordered\"` — rounded border around the table with a tinted header background\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"bordered\"\n  /** External search/filter string (controlled) */\n  globalFilter?: string\n  /** Callback when global filter changes */\n  onGlobalFilterChange?: (value: string) => void\n  /** Click handler for rows */\n  onRowClick?: (row: TData) => void\n  /** Number of rows per page. Set to 0 or Infinity to disable pagination.\n   * @default 10\n   */\n  pageSize?: number\n  /** Initial sorting state */\n  initialSorting?: SortingState\n  /** Controlled column visibility */\n  columnVisibility?: VisibilityState\n  /** Callback when column visibility changes */\n  onColumnVisibilityChange?: (visibility: VisibilityState) => void\n  /** Enable row selection checkboxes\n   * @default false\n   */\n  enableRowSelection?: boolean\n  /** Controlled row selection state */\n  rowSelection?: RowSelectionState\n  /** Callback when row selection changes */\n  onRowSelectionChange?: (selection: RowSelectionState) => void\n  /** Custom row ID accessor */\n  getRowId?: (row: TData) => string\n  /** Message shown when there are no rows\n   * @default \"No results.\"\n   */\n  emptyMessage?: ReactNode\n  /** Class applied to the outermost wrapper */\n  className?: string\n  /** Whether to show pagination controls. Auto-hidden when all rows fit.\n   * @default true\n   */\n  showPagination?: boolean\n}\n\nconst resolveUpdater = <T,>(updater: Updater<T>, value: T): T => {\n  return typeof updater === \"function\" ? (updater as (old: T) => T)(value) : updater\n}\n\nexport const DataTable = <TData,>({\n  columns,\n  data,\n  variant = \"default\",\n  globalFilter,\n  onGlobalFilterChange,\n  onRowClick,\n  pageSize = 10,\n  initialSorting,\n  columnVisibility,\n  onColumnVisibilityChange,\n  enableRowSelection = false,\n  rowSelection,\n  onRowSelectionChange,\n  getRowId,\n  emptyMessage = \"No results.\",\n  className,\n  showPagination = true,\n}: DataTableProps<TData>) => {\n  const [sorting, setSorting] = useState<SortingState>(initialSorting ?? [])\n\n  const shouldPaginate = Number.isFinite(pageSize) && pageSize > 0\n\n  const handleGlobalFilterChange: OnChangeFn<string> | undefined = onGlobalFilterChange\n    ? (updater) => {\n        onGlobalFilterChange(resolveUpdater(updater, globalFilter ?? \"\"))\n      }\n    : undefined\n\n  const handleColumnVisibilityChange: OnChangeFn<VisibilityState> | undefined =\n    onColumnVisibilityChange\n      ? (updater) => {\n          onColumnVisibilityChange(resolveUpdater(updater, columnVisibility ?? {}))\n        }\n      : undefined\n\n  const handleRowSelectionChange: OnChangeFn<RowSelectionState> | undefined = onRowSelectionChange\n    ? (updater) => {\n        onRowSelectionChange(resolveUpdater(updater, rowSelection ?? {}))\n      }\n    : undefined\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      globalFilter,\n      columnVisibility,\n      rowSelection,\n    },\n    ...(shouldPaginate ? { initialState: { pagination: { pageIndex: 0, pageSize } } } : {}),\n    onSortingChange: setSorting,\n    onGlobalFilterChange: handleGlobalFilterChange,\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    onRowSelectionChange: handleRowSelectionChange,\n    getRowId: getRowId ? (originalRow) => getRowId(originalRow) : undefined,\n    enableRowSelection,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    ...(shouldPaginate ? { getPaginationRowModel: getPaginationRowModel() } : {}),\n  })\n\n  const rows = table.getRowModel().rows\n  const totalRows = table.getFilteredRowModel().rows.length\n  const hasPagination = shouldPaginate && totalRows > pageSize\n  const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1)\n\n  return (\n    <div\n      className={clsx(s.DataTable, className)}\n      data-variant={variant}\n      data-clickable={onRowClick ? \"\" : undefined}\n    >\n      <div className={s.TableContainer}>\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(header.column.columnDef.header, header.getContext())}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {rows.length === 0 ? (\n              <TableRow>\n                <TableCell colSpan={visibleColumnCount} className={s.EmptyCell}>\n                  {emptyMessage}\n                </TableCell>\n              </TableRow>\n            ) : (\n              rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  onClick={onRowClick ? () => onRowClick(row.original) : undefined}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      {showPagination && hasPagination && <DataTablePagination table={table} />}\n    </div>\n  )\n}\n"]}

package/dist/es/components/DataTable/DataTable.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex: 1;
   flex-direction: column;
+  width: 100%;
   min-height: 0;
 }.TableContainer {
   flex: 1;
@@ -13,6 +14,19 @@
   color: var(--color-text-tertiary);
   text-align: center;
 }
+  :where(.DataTable[data-variant="bordered"]) .TableContainer {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+  }
+
+  :where(.DataTable[data-variant="bordered"]) :where(thead) {
+    --table-header-background: var(--color-surface-secondary);
+  }
+
+  :where(.DataTable[data-variant="bordered"]) .Pagination {
+    border-top: none;
+  }
   :where(.DataTable[data-clickable]) :where(tbody tr) {
     cursor: pointer;
   }.Pagination {

package/dist/es/components/DataTable/columnHelpers.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from "../Badge";
+import { CopyTooltip } from "../Tooltip";
+import { Tooltip } from "../Tooltip";
+export function idCell(accessor) {
+    function IdCell({ row }) {
+        const value = accessor(row.original);
+        return (_jsx(CopyTooltip, { copyValue: value, children: _jsx("span", { style: {
+                    fontFamily: "var(--font-mono, ui-monospace, monospace)",
+                    color: "var(--color-text-secondary)",
+                    cursor: "pointer",
+                }, children: value }) }));
+    }
+    IdCell.displayName = "IdCell";
+    return IdCell;
+}
+export function dateTimeCell(accessor, options) {
+    const defaultOptions = {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    };
+    const fmt = new Intl.DateTimeFormat("en-US", options ?? defaultOptions);
+    function DateTimeCell({ row }) {
+        const val = accessor(row.original);
+        return _jsx("span", { style: { color: "var(--color-text-secondary)" }, children: val ? fmt.format(new Date(val)) : "—" });
+    }
+    DateTimeCell.displayName = "DateTimeCell";
+    return DateTimeCell;
+}
+export function statusCell(accessor, colorMap) {
+    const defaultColorMap = {
+        active: "success",
+        completed: "success",
+        paid: "success",
+        pending: "warning",
+        processing: "info",
+        inactive: "secondary",
+        cancelled: "danger",
+        failed: "danger",
+        unpaid: "danger",
+    };
+    function StatusCell({ row }) {
+        const status = accessor(row.original);
+        const map = colorMap ?? defaultColorMap;
+        const color = map[status.toLowerCase()] ?? "secondary";
+        return (_jsx(Badge, { color: color, variant: "soft", children: status }));
+    }
+    StatusCell.displayName = "StatusCell";
+    return StatusCell;
+}
+export function tooltipHeader(label, description) {
+    function TooltipHeader() {
+        return (_jsx(Tooltip, { content: description, side: "bottom", maxWidth: 260, children: _jsx("span", { style: { cursor: "help", borderBottom: "1px dashed currentColor" }, children: label }) }));
+    }
+    TooltipHeader.displayName = "TooltipHeader";
+    return TooltipHeader;
+}
+//# sourceMappingURL=columnHelpers.js.map

package/dist/es/components/DataTable/columnHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnHelpers.js","sourceRoot":"","sources":["../../../../src/components/DataTable/columnHelpers.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAGZ,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,MAAM,UAAU,MAAM,CAAI,QAA4B;IACpD,SAAS,MAAM,CAAC,EAAE,GAAG,EAA2B;QAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;QACpC,OAAO,CACL,KAAC,WAAW,IAAC,SAAS,EAAE,KAAK,YAC3B,eACE,KAAK,EAAE;oBACL,UAAU,EAAE,2CAA2C;oBACvD,KAAK,EAAE,6BAA6B;oBACpC,MAAM,EAAE,SAAS;iBAClB,YAEA,KAAK,GACD,GACK,CACf,CAAA;IACH,CAAC;IACD,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;IAC7B,OAAO,MAAM,CAAA;AACf,CAAC;AAED,MAAM,UAAU,YAAY,CAC1B,QAA+C,EAC/C,OAAoC;IAEpC,MAAM,cAAc,GAA+B;QACjD,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,OAAO;QACd,GAAG,EAAE,SAAS;QACd,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;KAClB,CAAA;IACD,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,IAAI,cAAc,CAAC,CAAA;IAEvE,SAAS,YAAY,CAAC,EAAE,GAAG,EAA2B;QACpD,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;QAClC,OAAO,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,6BAA6B,EAAE,YAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAQ,CAAA;IAC9G,CAAC;IACD,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;IACzC,OAAO,YAAY,CAAA;AACrB,CAAC;AAED,MAAM,UAAU,UAAU,CACxB,QAA4B,EAC5B,QAGC;IAED,MAAM,eAAe,GAGjB;QACF,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,SAAS;QACpB,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,SAAS;QAClB,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,WAAW;QACrB,SAAS,EAAE,QAAQ;QACnB,MAAM,EAAE,QAAQ;QAChB,MAAM,EAAE,QAAQ;KACjB,CAAA;IAED,SAAS,UAAU,CAAC,EAAE,GAAG,EAA2B;QAClD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;QACrC,MAAM,GAAG,GAAG,QAAQ,IAAI,eAAe,CAAA;QACvC,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,IAAI,WAAW,CAAA;QACtD,OAAO,CACL,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,MAAM,YAChC,MAAM,GACD,CACT,CAAA;IACH,CAAC;IACD,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;IACrC,OAAO,UAAU,CAAA;AACnB,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,KAAa,EAAE,WAAmB;IAC9D,SAAS,aAAa;QACpB,OAAO,CACL,KAAC,OAAO,IAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,GAAG,YACxD,eAAM,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,yBAAyB,EAAE,YAAG,KAAK,GAAQ,GAChF,CACX,CAAA;IACH,CAAC;IACD,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA;IAC3C,OAAO,aAAa,CAAA;AACtB,CAAC","sourcesContent":["\"use client\"\n\nimport type { CellContext } from \"@tanstack/react-table\"\nimport { Badge } from \"../Badge\"\nimport { CopyTooltip } from \"../Tooltip\"\nimport { Tooltip } from \"../Tooltip\"\n\nexport function idCell<T>(accessor: (row: T) => string) {\n  function IdCell({ row }: CellContext<T, unknown>) {\n    const value = accessor(row.original)\n    return (\n      <CopyTooltip copyValue={value}>\n        <span\n          style={{\n            fontFamily: \"var(--font-mono, ui-monospace, monospace)\",\n            color: \"var(--color-text-secondary)\",\n            cursor: \"pointer\",\n          }}\n        >\n          {value}\n        </span>\n      </CopyTooltip>\n    )\n  }\n  IdCell.displayName = \"IdCell\"\n  return IdCell\n}\n\nexport function dateTimeCell<T>(\n  accessor: (row: T) => string | null | undefined,\n  options?: Intl.DateTimeFormatOptions,\n) {\n  const defaultOptions: Intl.DateTimeFormatOptions = {\n    year: \"numeric\",\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  }\n  const fmt = new Intl.DateTimeFormat(\"en-US\", options ?? defaultOptions)\n\n  function DateTimeCell({ row }: CellContext<T, unknown>) {\n    const val = accessor(row.original)\n    return <span style={{ color: \"var(--color-text-secondary)\" }}>{val ? fmt.format(new Date(val)) : \"—\"}</span>\n  }\n  DateTimeCell.displayName = \"DateTimeCell\"\n  return DateTimeCell\n}\n\nexport function statusCell<T>(\n  accessor: (row: T) => string,\n  colorMap?: Record<\n    string,\n    \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"discovery\" | \"caution\"\n  >,\n) {\n  const defaultColorMap: Record<\n    string,\n    \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"discovery\" | \"caution\"\n  > = {\n    active: \"success\",\n    completed: \"success\",\n    paid: \"success\",\n    pending: \"warning\",\n    processing: \"info\",\n    inactive: \"secondary\",\n    cancelled: \"danger\",\n    failed: \"danger\",\n    unpaid: \"danger\",\n  }\n\n  function StatusCell({ row }: CellContext<T, unknown>) {\n    const status = accessor(row.original)\n    const map = colorMap ?? defaultColorMap\n    const color = map[status.toLowerCase()] ?? \"secondary\"\n    return (\n      <Badge color={color} variant=\"soft\">\n        {status}\n      </Badge>\n    )\n  }\n  StatusCell.displayName = \"StatusCell\"\n  return StatusCell\n}\n\nexport function tooltipHeader(label: string, description: string) {\n  function TooltipHeader() {\n    return (\n      <Tooltip content={description} side=\"bottom\" maxWidth={260}>\n        <span style={{ cursor: \"help\", borderBottom: \"1px dashed currentColor\" }}>{label}</span>\n      </Tooltip>\n    )\n  }\n  TooltipHeader.displayName = \"TooltipHeader\"\n  return TooltipHeader\n}\n"]}

package/dist/es/components/DataTable/index.js

@@ -1,4 +1,5 @@
 export { DataTable } from "./DataTable";
 export { DataTablePagination } from "./DataTablePagination";
 export { DataTableColumnHeader } from "./DataTableColumnHeader";
+export { idCell, dateTimeCell, statusCell, tooltipHeader } from "./columnHelpers";
 //# sourceMappingURL=index.js.map

package/dist/es/components/DataTable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DataTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAA;AAC5D,OAAO,EAAE,mBAAmB,EAAiC,MAAM,uBAAuB,CAAA;AAC1F,OAAO,EAAE,qBAAqB,EAAmC,MAAM,yBAAyB,CAAA","sourcesContent":["export { DataTable, type DataTableProps } from \"./DataTable\"\nexport { DataTablePagination, type DataTablePaginationProps } from \"./DataTablePagination\"\nexport { DataTableColumnHeader, type DataTableColumnHeaderProps } from \"./DataTableColumnHeader\"\n\nexport type {\n  ColumnDef,\n  RowSelectionState,\n  SortingState,\n  VisibilityState,\n} from \"@tanstack/react-table\"\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DataTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAA;AAC5D,OAAO,EAAE,mBAAmB,EAAiC,MAAM,uBAAuB,CAAA;AAC1F,OAAO,EAAE,qBAAqB,EAAmC,MAAM,yBAAyB,CAAA;AAShG,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA","sourcesContent":["export { DataTable, type DataTableProps } from \"./DataTable\"\nexport { DataTablePagination, type DataTablePaginationProps } from \"./DataTablePagination\"\nexport { DataTableColumnHeader, type DataTableColumnHeaderProps } from \"./DataTableColumnHeader\"\n\nexport type {\n  ColumnDef,\n  RowSelectionState,\n  SortingState,\n  VisibilityState,\n} from \"@tanstack/react-table\"\n\nexport { idCell, dateTimeCell, statusCell, tooltipHeader } from \"./columnHelpers\"\n"]}

package/dist/types/components/DataTable/DataTable.d.ts

@@ -5,6 +5,12 @@ export type DataTableProps<TData> = {
     columns: ColumnDef<TData, unknown>[];
     /** Data array to display */
     data: TData[];
+    /** Visual variant
+     * - `"default"` — borderless table with transparent header
+     * - `"bordered"` — rounded border around the table with a tinted header background
+     * @default "default"
+     */
+    variant?: "default" | "bordered";
     /** External search/filter string (controlled) */
     globalFilter?: string;
     /** Callback when global filter changes */
@@ -42,4 +48,4 @@ export type DataTableProps<TData> = {
      */
     showPagination?: boolean;
 };
-export declare const DataTable: <TData>({ columns, data, globalFilter, onGlobalFilterChange, onRowClick, pageSize, initialSorting, columnVisibility, onColumnVisibilityChange, enableRowSelection, rowSelection, onRowSelectionChange, getRowId, emptyMessage, className, showPagination, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <TData>({ columns, data, variant, globalFilter, onGlobalFilterChange, onRowClick, pageSize, initialSorting, columnVisibility, onColumnVisibilityChange, enableRowSelection, rowSelection, onRowSelectionChange, getRowId, emptyMessage, className, showPagination, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/columnHelpers.d.ts

@@ -0,0 +1,17 @@
+import type { CellContext } from "@tanstack/react-table";
+export declare function idCell<T>(accessor: (row: T) => string): {
+    ({ row }: CellContext<T, unknown>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare function dateTimeCell<T>(accessor: (row: T) => string | null | undefined, options?: Intl.DateTimeFormatOptions): {
+    ({ row }: CellContext<T, unknown>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare function statusCell<T>(accessor: (row: T) => string, colorMap?: Record<string, "secondary" | "success" | "danger" | "warning" | "info" | "discovery" | "caution">): {
+    ({ row }: CellContext<T, unknown>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare function tooltipHeader(label: string, description: string): {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/types/components/DataTable/index.d.ts

@@ -2,3 +2,4 @@ export { DataTable, type DataTableProps } from "./DataTable";
 export { DataTablePagination, type DataTablePaginationProps } from "./DataTablePagination";
 export { DataTableColumnHeader, type DataTableColumnHeaderProps } from "./DataTableColumnHeader";
 export type { ColumnDef, RowSelectionState, SortingState, VisibilityState, } from "@tanstack/react-table";
+export { idCell, dateTimeCell, statusCell, tooltipHeader } from "./columnHelpers";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.7.38",
+  "version": "0.7.39",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",