@mirror-physics/fractal-ui 0.2.0-next.59 → 0.2.0-next.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +11 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +11 -2
- package/dist/index.d.ts +11 -2
- package/dist/index.js +11 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1455,6 +1455,7 @@ function SortableTable({
|
|
|
1455
1455
|
sortKey: controlledKey,
|
|
1456
1456
|
sortDirection: controlledDirection,
|
|
1457
1457
|
onSortChange,
|
|
1458
|
+
pagination,
|
|
1458
1459
|
highlightRow,
|
|
1459
1460
|
onRowClick,
|
|
1460
1461
|
rowAction
|
|
@@ -1494,6 +1495,14 @@ function SortableTable({
|
|
|
1494
1495
|
});
|
|
1495
1496
|
return copy;
|
|
1496
1497
|
}, [data, columns, effectiveKey, effectiveDirection]);
|
|
1498
|
+
const visibleRows = (0, import_react4.useMemo)(() => {
|
|
1499
|
+
if (!pagination) return sorted;
|
|
1500
|
+
const pageSize = Math.max(1, pagination.pageSize);
|
|
1501
|
+
const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
|
|
1502
|
+
const page = Math.min(Math.max(1, pagination.page), totalPages);
|
|
1503
|
+
const startIndex = (page - 1) * pageSize;
|
|
1504
|
+
return sorted.slice(startIndex, startIndex + pageSize);
|
|
1505
|
+
}, [pagination, sorted]);
|
|
1497
1506
|
const handleSortClick = (key) => {
|
|
1498
1507
|
let nextDirection;
|
|
1499
1508
|
if (!activeKey || !activeDirection) {
|
|
@@ -1518,7 +1527,7 @@ function SortableTable({
|
|
|
1518
1527
|
};
|
|
1519
1528
|
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("fractal-sortable-table", `fractal-sortable-table--${size}`, embedded && "fractal-sortable-table--embedded", className), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fractal-sortable-table-surface", children: [
|
|
1520
1529
|
header && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-sortable-table-header", children: header }),
|
|
1521
|
-
|
|
1530
|
+
visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fractal-sortable-table-empty", children: emptyMessage || "No data" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("table", { className: "fractal-sortable-table-table", children: [
|
|
1522
1531
|
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tr", { className: "fractal-sortable-table-thead-row", children: columns.map((col) => {
|
|
1523
1532
|
const isActive = activeKey === col.key && activeDirection !== null;
|
|
1524
1533
|
if (!col.sortable) {
|
|
@@ -1557,7 +1566,7 @@ function SortableTable({
|
|
|
1557
1566
|
col.key
|
|
1558
1567
|
);
|
|
1559
1568
|
}) }) }),
|
|
1560
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tbody", { children:
|
|
1569
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tbody", { children: visibleRows.map((row, rowIndex) => {
|
|
1561
1570
|
const highlighted = highlightRow?.(row, rowIndex) ?? false;
|
|
1562
1571
|
const action = rowAction ? {
|
|
1563
1572
|
label: rowAction.label(row, rowIndex),
|