@pallasoft/ps-table-components 1.0.0 → 1.1.0

package/dist/components/ps-data-table.d.ts

@@ -1,9 +1,15 @@
 import type { PsTableColumn } from '../interfaces/table-column';
 export interface PsDataTableProps<RowData> {
     caption?: string;
+    className?: string;
     columns: PsTableColumn<RowData>[];
     density?: 'compact' | 'normal';
     getRowId: (row: RowData) => string;
+    onPageChange?: (page: number) => void;
+    onRowClick?: (row: RowData) => void;
+    page?: number;
+    pageSize?: number;
     rows: RowData[];
+    totalRows?: number;
 }
-export declare const PsDataTable: <RowData>({ caption, columns, density, getRowId, rows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;
+export declare const PsDataTable: <RowData>({ caption, className, columns, density, getRowId, onPageChange, onRowClick, page, pageSize, rows, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;

package/dist/components/ps-data-table.js

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsDataTable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_table_pagination_1 = require("./ps-table-pagination");
 const densityClassNames = {
     compact: {
         cell: 'px-4 py-3',
@@ -12,5 +15,41 @@ const densityClassNames = {
         head: 'px-4 py-3.5',
     },
 };
-const PsDataTable = ({ caption, columns, density = 'normal', getRowId, rows, }) => ((0, jsx_runtime_1.jsx)("div", { className: 'overflow-hidden rounded-[1.25rem] border border-line bg-white', children: (0, jsx_runtime_1.jsxs)("table", { className: 'w-full border-collapse text-left', children: [caption ? (0, jsx_runtime_1.jsx)("caption", { className: 'sr-only', children: caption }) : null, (0, jsx_runtime_1.jsx)("thead", { className: 'bg-slate-50/90 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-slate-400', children: (0, jsx_runtime_1.jsx)("tr", { children: columns.map((column) => ((0, jsx_runtime_1.jsx)("th", { className: densityClassNames[density].head, children: column.label }, column.id))) }) }), (0, jsx_runtime_1.jsx)("tbody", { className: 'divide-y divide-line', children: rows.map((row) => ((0, jsx_runtime_1.jsx)("tr", { className: 'align-top transition hover:bg-slate-50/60', children: columns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: densityClassNames[density].cell, children: column.render(row) }, column.id))) }, getRowId(row)))) })] }) }));
+const alignClassNames = {
+    center: 'text-center',
+    left: 'text-left',
+    right: 'text-right tabular-nums',
+};
+const PsDataTable = ({ caption, className, columns, density = 'normal', getRowId, onPageChange, onRowClick, page, pageSize, rows, totalRows, }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    const hasFooter = columns.some((column) => column.footer !== undefined);
+    const [uncontrolledPage, setUncontrolledPage] = (0, react_1.useState)(1);
+    const isPaginated = Boolean(pageSize);
+    const isServerPaginated = totalRows !== undefined;
+    const currentPage = page !== null && page !== undefined ? page : uncontrolledPage;
+    const rowCount = totalRows !== null && totalRows !== undefined ? totalRows : rows.length;
+    const pageCount = pageSize ? Math.max(Math.ceil(rowCount / pageSize), 1) : 1;
+    const safePage = Math.min(Math.max(currentPage, 1), pageCount);
+    const visibleRows = (0, react_1.useMemo)(() => {
+        if (!pageSize || isServerPaginated)
+            return rows;
+        return rows.slice((safePage - 1) * pageSize, safePage * pageSize);
+    }, [isServerPaginated, pageSize, rows, safePage]);
+    const changePage = (next) => {
+        if (onPageChange) {
+            onPageChange(next);
+            return;
+        }
+        containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        setUncontrolledPage(next);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto rounded-[1.25rem] border border-line bg-surface', className), children: [(0, jsx_runtime_1.jsxs)("table", { className: 'w-full border-collapse text-left', children: [caption ? (0, jsx_runtime_1.jsx)("caption", { className: 'sr-only', children: caption }) : null, (0, jsx_runtime_1.jsx)("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: (0, jsx_runtime_1.jsx)("tr", { children: columns.map((column) => ((0, jsx_runtime_1.jsx)("th", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], 'whitespace-nowrap'), scope: 'col', style: column.width ? { width: column.width } : undefined, children: column.label }, column.id))) }) }), (0, jsx_runtime_1.jsx)("tbody", { className: 'divide-y divide-line', children: visibleRows.map((row) => ((0, jsx_runtime_1.jsx)("tr", { className: ps_design_system_1.PallasoftClassNameService.merge('align-top transition', onRowClick ? 'ps-focus-ring cursor-pointer hover:bg-mist/60' : 'hover:bg-mist/40'), onClick: onRowClick ? () => onRowClick(row) : undefined, onKeyDown: onRowClick
+                                ? (event) => {
+                                    if (event.key !== 'Enter' && event.key !== ' ')
+                                        return;
+                                    event.preventDefault();
+                                    onRowClick(row);
+                                }
+                                : undefined, tabIndex: onRowClick ? 0 : undefined, children: columns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], 'text-ink'), children: column.render(row) }, column.id))) }, getRowId(row)))) }), hasFooter ? ((0, jsx_runtime_1.jsx)("tfoot", { className: 'border-t-2 border-line bg-mist/50 font-semibold text-ink', children: (0, jsx_runtime_1.jsx)("tr", { children: columns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left']), children: column.footer }, column.id))) }) })) : null] }), isPaginated && pageSize ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] }));
+};
 exports.PsDataTable = PsDataTable;

package/dist/components/ps-table-pagination.d.ts

@@ -0,0 +1,9 @@
+export interface PsTablePaginationProps {
+    className?: string;
+    onPageChange: (page: number) => void;
+    page: number;
+    pageCount: number;
+    pageSize: number;
+    totalRows: number;
+}
+export declare const PsTablePagination: ({ className, onPageChange, page, pageCount, pageSize, totalRows, }: PsTablePaginationProps) => import("react").JSX.Element;

package/dist/components/ps-table-pagination.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTablePagination = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsTablePagination = ({ className, onPageChange, page, pageCount, pageSize, totalRows, }) => {
+    const firstRow = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
+    const lastRow = Math.min(page * pageSize, totalRows);
+    const buttonClassName = 'ps-focus-ring rounded-ps-control border border-line px-3 py-1.5 text-sm font-semibold text-ink transition disabled:cursor-not-allowed disabled:opacity-40 enabled:hover:border-primary/40 enabled:hover:text-primary';
+    return ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": 'Pagination', className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-muted', children: totalRows === 0 ? 'No rows' : `Showing ${firstRow}-${lastRow} of ${totalRows}` }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-2', children: [(0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), (0, jsx_runtime_1.jsxs)("span", { className: 'text-sm font-semibold text-ink', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), (0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page >= pageCount, onClick: () => onPageChange(page + 1), type: 'button', children: "Next" })] })] }));
+};
+exports.PsTablePagination = PsTablePagination;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components/ps-data-table';
+export * from './components/ps-table-pagination';
 export * from './interfaces/table-column';

package/dist/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/ps-data-table"), exports);
+__exportStar(require("./components/ps-table-pagination"), exports);
 __exportStar(require("./interfaces/table-column"), exports);

package/dist/interfaces/table-column.d.ts

@@ -1,6 +1,9 @@
 import type { ReactNode } from 'react';
 export interface PsTableColumn<RowData> {
+    align?: 'center' | 'left' | 'right';
+    footer?: ReactNode;
     id: string;
     label: string;
     render: (row: RowData) => ReactNode;
+    width?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-table-components",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -53,7 +53,8 @@
 		"husky": "^9.1.7",
 		"lint-staged": "^16.2.7",
 		"prettier": "^3.6.2",
-		"react": "^18.3.1",
+		"react": "^19.3.0",
+		"react-dom": "^19.3.0",
 		"semantic-release": "^24.2.0",
 		"ts-node": "^10.9.2",
 		"typescript": "^5.9.3"
@@ -65,5 +66,8 @@
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/pallasoft/ps-table-components.git"
+	},
+	"dependencies": {
+		"@pallasoft/ps-design-system": "^1.1.0"
 	}
 }