@plexui/ui 0.7.39 → 0.7.40

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

@@ -52,8 +52,14 @@ export const DataTable = ({ columns, data, variant = "default", globalFilter, on
     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-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 })] }));
+    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) => {
+                                    const align = header.column.columnDef.meta?.align;
+                                    return (_jsx(TableHead, { style: align ? { textAlign: align } : undefined, 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) => {
+                                    const align = cell.column.columnDef.meta?.align;
+                                    return (_jsx(TableCell, { style: align ? { textAlign: align } : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                }) }, row.id)))) })] }) }), showPagination && hasPagination && _jsx(DataTablePagination, { table: table })] }));
 };
 //# sourceMappingURL=DataTable.js.map

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

@@ -1 +1 @@
-{"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"]}
+{"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 RowData,\n  type RowSelectionState,\n  type SortingState,\n  type Updater,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\n\ndeclare module \"@tanstack/react-table\" {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: \"left\" | \"center\" | \"right\"\n  }\n}\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                  const align = header.column.columnDef.meta?.align\n                  return (\n                    <TableHead key={header.id} style={align ? { textAlign: align } : undefined}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(header.column.columnDef.header, header.getContext())}\n                    </TableHead>\n                  )\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                    const align = cell.column.columnDef.meta?.align\n                    return (\n                      <TableCell key={cell.id} style={align ? { textAlign: align } : undefined}>\n                        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                      </TableCell>\n                    )\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/DataTablePagination.js

@@ -9,6 +9,6 @@ export const DataTablePagination = ({ table }) => {
     const { pageIndex, pageSize } = table.getState().pagination;
     const from = pageIndex * pageSize + 1;
     const to = Math.min((pageIndex + 1) * pageSize, totalRows);
-    return (_jsxs("div", { className: s.Pagination, children: [_jsxs("div", { className: s.PaginationLeft, children: [_jsx("span", { className: s.PaginationLabel, children: "Rows per page" }), _jsx("select", { className: s.PaginationSelect, value: pageSize, onChange: (e) => table.setPageSize(Number(e.target.value)), children: [10, 20, 50, 100].map((size) => (_jsx("option", { value: size, children: size }, size))) })] }), _jsxs("div", { className: s.PaginationRight, children: [_jsx("span", { className: s.PaginationInfo, children: totalRows === 0 ? "0 results" : `${from}–${to} of ${totalRows}` }), _jsxs("div", { className: s.PaginationButtons, children: [_jsx(Button, { color: "secondary", variant: "outline", size: "sm", uniform: true, disabled: !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: _jsx(ChevronLeftMd, {}) }), _jsx(Button, { color: "secondary", variant: "outline", size: "sm", uniform: true, disabled: !table.getCanNextPage(), onClick: () => table.nextPage(), children: _jsx(ChevronRightMd, {}) })] })] })] }));
+    return (_jsxs("div", { className: s.Pagination, children: [_jsxs("div", { className: s.PaginationLeft, children: [_jsx("span", { className: s.PaginationLabel, children: "Rows per page" }), _jsx("select", { className: s.PaginationSelect, value: pageSize, onChange: (e) => table.setPageSize(Number(e.target.value)), children: [10, 20, 50, 100].map((size) => (_jsx("option", { value: size, children: size }, size))) })] }), _jsxs("div", { className: s.PaginationRight, children: [_jsx("span", { className: s.PaginationInfo, children: totalRows === 0 ? "0 results" : `${from}–${to} of ${totalRows}` }), _jsxs("div", { className: s.PaginationButtons, children: [_jsx(Button, { color: "secondary", variant: "outline", size: "sm", pill: false, uniform: true, disabled: !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: _jsx(ChevronLeftMd, {}) }), _jsx(Button, { color: "secondary", variant: "outline", size: "sm", pill: false, uniform: true, disabled: !table.getCanNextPage(), onClick: () => table.nextPage(), children: _jsx(ChevronRightMd, {}) })] })] })] }));
 };
 //# sourceMappingURL=DataTablePagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTablePagination.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAc,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACvD,OAAO,CAAC,MAAM,wBAAwB,CAAA;AAMtC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAS,EAAE,KAAK,EAAmC,EAAE,EAAE;IACxF,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,MAAM,CAAA;IACzD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAA;IAC3D,MAAM,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,CAAC,CAAA;IACrC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAA;IAE1D,OAAO,CACL,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,aAC1B,eAAK,SAAS,EAAE,CAAC,CAAC,cAAc,aAC9B,eAAM,SAAS,EAAE,CAAC,CAAC,eAAe,8BAAsB,EACxD,iBACE,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAC7B,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,YAEzD,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/B,iBAAmB,KAAK,EAAE,IAAI,YAC3B,IAAI,IADM,IAAI,CAER,CACV,CAAC,GACK,IACL,EACN,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,aAC/B,eAAM,SAAS,EAAE,CAAC,CAAC,cAAc,YAC9B,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,EAAE,OAAO,SAAS,EAAE,GAC3D,EACP,eAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,aACjC,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,YAEnC,KAAC,aAAa,KAAG,GACV,EACT,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,YAE/B,KAAC,cAAc,KAAG,GACX,IACL,IACF,IACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { type Table } from \"@tanstack/react-table\"\nimport { Button } from \"../Button\"\nimport { ChevronLeftMd, ChevronRightMd } from \"../Icon\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTablePaginationProps<TData> = {\n  table: Table<TData>\n}\n\nexport const DataTablePagination = <TData,>({ table }: DataTablePaginationProps<TData>) => {\n  const totalRows = table.getFilteredRowModel().rows.length\n  const { pageIndex, pageSize } = table.getState().pagination\n  const from = pageIndex * pageSize + 1\n  const to = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n  return (\n    <div className={s.Pagination}>\n      <div className={s.PaginationLeft}>\n        <span className={s.PaginationLabel}>Rows per page</span>\n        <select\n          className={s.PaginationSelect}\n          value={pageSize}\n          onChange={(e) => table.setPageSize(Number(e.target.value))}\n        >\n          {[10, 20, 50, 100].map((size) => (\n            <option key={size} value={size}>\n              {size}\n            </option>\n          ))}\n        </select>\n      </div>\n      <div className={s.PaginationRight}>\n        <span className={s.PaginationInfo}>\n          {totalRows === 0 ? \"0 results\" : `${from}–${to} of ${totalRows}`}\n        </span>\n        <div className={s.PaginationButtons}>\n          <Button\n            color=\"secondary\"\n            variant=\"outline\"\n            size=\"sm\"\n            uniform\n            disabled={!table.getCanPreviousPage()}\n            onClick={() => table.previousPage()}\n          >\n            <ChevronLeftMd />\n          </Button>\n          <Button\n            color=\"secondary\"\n            variant=\"outline\"\n            size=\"sm\"\n            uniform\n            disabled={!table.getCanNextPage()}\n            onClick={() => table.nextPage()}\n          >\n            <ChevronRightMd />\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"DataTablePagination.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAc,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACvD,OAAO,CAAC,MAAM,wBAAwB,CAAA;AAMtC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAS,EAAE,KAAK,EAAmC,EAAE,EAAE;IACxF,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,MAAM,CAAA;IACzD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAA;IAC3D,MAAM,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,CAAC,CAAA;IACrC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAA;IAE1D,OAAO,CACL,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,aAC1B,eAAK,SAAS,EAAE,CAAC,CAAC,cAAc,aAC9B,eAAM,SAAS,EAAE,CAAC,CAAC,eAAe,8BAAsB,EACxD,iBACE,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAC7B,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,YAEzD,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/B,iBAAmB,KAAK,EAAE,IAAI,YAC3B,IAAI,IADM,IAAI,CAER,CACV,CAAC,GACK,IACL,EACN,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,aAC/B,eAAM,SAAS,EAAE,CAAC,CAAC,cAAc,YAC9B,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,EAAE,OAAO,SAAS,EAAE,GAC3D,EACP,eAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,aACjC,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,KAAK,EACX,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,YAEnC,KAAC,aAAa,KAAG,GACV,EACT,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,KAAK,EACX,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,YAE/B,KAAC,cAAc,KAAG,GACX,IACL,IACF,IACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { type Table } from \"@tanstack/react-table\"\nimport { Button } from \"../Button\"\nimport { ChevronLeftMd, ChevronRightMd } from \"../Icon\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTablePaginationProps<TData> = {\n  table: Table<TData>\n}\n\nexport const DataTablePagination = <TData,>({ table }: DataTablePaginationProps<TData>) => {\n  const totalRows = table.getFilteredRowModel().rows.length\n  const { pageIndex, pageSize } = table.getState().pagination\n  const from = pageIndex * pageSize + 1\n  const to = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n  return (\n    <div className={s.Pagination}>\n      <div className={s.PaginationLeft}>\n        <span className={s.PaginationLabel}>Rows per page</span>\n        <select\n          className={s.PaginationSelect}\n          value={pageSize}\n          onChange={(e) => table.setPageSize(Number(e.target.value))}\n        >\n          {[10, 20, 50, 100].map((size) => (\n            <option key={size} value={size}>\n              {size}\n            </option>\n          ))}\n        </select>\n      </div>\n      <div className={s.PaginationRight}>\n        <span className={s.PaginationInfo}>\n          {totalRows === 0 ? \"0 results\" : `${from}–${to} of ${totalRows}`}\n        </span>\n        <div className={s.PaginationButtons}>\n          <Button\n            color=\"secondary\"\n            variant=\"outline\"\n            size=\"sm\"\n            pill={false}\n            uniform\n            disabled={!table.getCanPreviousPage()}\n            onClick={() => table.previousPage()}\n          >\n            <ChevronLeftMd />\n          </Button>\n          <Button\n            color=\"secondary\"\n            variant=\"outline\"\n            size=\"sm\"\n            pill={false}\n            uniform\n            disabled={!table.getCanNextPage()}\n            onClick={() => table.nextPage()}\n          >\n            <ChevronRightMd />\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"]}

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

@@ -4,6 +4,7 @@
   overflow: auto;
 }.Table {
   width: 100%;
+  table-layout: fixed;
   border-collapse: collapse;
   font-size: var(--table-cell-font-size);
   line-height: var(--table-cell-line-height);

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

@@ -1,4 +1,9 @@
-import { type ColumnDef, type RowSelectionState, type SortingState, type VisibilityState } from "@tanstack/react-table";
+import { type ColumnDef, type RowData, type RowSelectionState, type SortingState, type VisibilityState } from "@tanstack/react-table";
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        align?: "left" | "center" | "right";
+    }
+}
 import { type ReactNode } from "react";
 export type DataTableProps<TData> = {
     /** Column definitions following TanStack Table v8 ColumnDef API */

package/package.json

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