@eml-payments/ui-kit 1.5.5 → 1.5.6
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.
|
@@ -128,6 +128,11 @@ const groupingData = Array.from({ length: 5 }).map((_, i) => ({
|
|
|
128
128
|
name: `User ${i + 1}`,
|
|
129
129
|
amount: getRandomInt(1000) + 100,
|
|
130
130
|
}));
|
|
131
|
+
const formatNumber = (amount) => new Intl.NumberFormat('en-US', {
|
|
132
|
+
style: 'currency',
|
|
133
|
+
currency: 'GBP',
|
|
134
|
+
minimumFractionDigits: 2,
|
|
135
|
+
}).format(amount);
|
|
131
136
|
const groupingColumns = [
|
|
132
137
|
{
|
|
133
138
|
accessorKey: 'name',
|
|
@@ -138,7 +143,10 @@ const groupingColumns = [
|
|
|
138
143
|
accessorKey: 'amount',
|
|
139
144
|
header: 'Amount',
|
|
140
145
|
flex: 1,
|
|
141
|
-
|
|
146
|
+
meta: {
|
|
147
|
+
groupTotalFormatter: (amount) => formatNumber(amount),
|
|
148
|
+
},
|
|
149
|
+
cell: ({ row }) => (_jsx("span", { style: { textAlign: 'right', display: 'block' }, children: formatNumber(row.original.amount) })),
|
|
142
150
|
},
|
|
143
151
|
{
|
|
144
152
|
accessorKey: 'date',
|
|
@@ -5,6 +5,13 @@ declare module '@tanstack/react-table' {
|
|
|
5
5
|
interface TableMeta<TData> {
|
|
6
6
|
hasActions?: boolean;
|
|
7
7
|
}
|
|
8
|
+
interface ColumnMeta<TData, TValue> {
|
|
9
|
+
isSelectionColumn?: boolean;
|
|
10
|
+
bgColor?: string;
|
|
11
|
+
groupTotalFormatter?: (value: number, context: {
|
|
12
|
+
rows: TData[];
|
|
13
|
+
}) => ReactNode;
|
|
14
|
+
}
|
|
8
15
|
}
|
|
9
16
|
export type FlexColumnDef<T> = ColumnDef<T> & {
|
|
10
17
|
flex?: number;
|
|
@@ -1,14 +1,49 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { classNames } from '../../../utils';
|
|
3
3
|
export function renderGroupRow({ row, onGroupRowClick }) {
|
|
4
|
+
var _a;
|
|
4
5
|
const columnId = row.groupingColumnId;
|
|
5
6
|
const groupValue = row.getGroupingValue(columnId);
|
|
6
7
|
const clickable = Boolean(onGroupRowClick);
|
|
8
|
+
const leafRows = row.getLeafRows();
|
|
9
|
+
const totalColumn = [...row.getVisibleCells()].reverse().find((cell) => {
|
|
10
|
+
if (cell.column.id === columnId || cell.column.id === 'select') {
|
|
11
|
+
return false;
|
|
12
|
+
}
|
|
13
|
+
return leafRows.some((leafRow) => {
|
|
14
|
+
const value = leafRow.getValue(cell.column.id);
|
|
15
|
+
return typeof value === 'number' && Number.isFinite(value);
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
const groupedTotal = totalColumn
|
|
19
|
+
? leafRows.reduce((sum, leafRow) => {
|
|
20
|
+
const value = leafRow.getValue(totalColumn.column.id);
|
|
21
|
+
if (typeof value !== 'number' || !Number.isFinite(value)) {
|
|
22
|
+
return sum;
|
|
23
|
+
}
|
|
24
|
+
return sum + value;
|
|
25
|
+
}, 0)
|
|
26
|
+
: null;
|
|
27
|
+
const groupTotalFormatter = (_a = totalColumn === null || totalColumn === void 0 ? void 0 : totalColumn.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.groupTotalFormatter;
|
|
28
|
+
let formattedGroupedTotal = null;
|
|
29
|
+
if (groupedTotal !== null) {
|
|
30
|
+
if (groupTotalFormatter) {
|
|
31
|
+
formattedGroupedTotal = groupTotalFormatter(groupedTotal, {
|
|
32
|
+
rows: leafRows.map((leafRow) => leafRow.original),
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
formattedGroupedTotal = new Intl.NumberFormat(undefined, {
|
|
37
|
+
minimumFractionDigits: Number.isInteger(groupedTotal) ? 0 : 2,
|
|
38
|
+
maximumFractionDigits: 2,
|
|
39
|
+
}).format(groupedTotal);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
7
42
|
return (_jsx("tr", { className: classNames('border-none', clickable && 'cursor-pointer hover:bg-muted/40'), onClick: clickable
|
|
8
43
|
? () => onGroupRowClick === null || onGroupRowClick === void 0 ? void 0 : onGroupRowClick({
|
|
9
44
|
columnId,
|
|
10
45
|
value: groupValue,
|
|
11
46
|
rows: row.subRows.map((r) => r.original),
|
|
12
47
|
})
|
|
13
|
-
: undefined, children: _jsx("td", { colSpan: row.getVisibleCells().length, className: "p-0", children:
|
|
48
|
+
: undefined, children: _jsx("td", { colSpan: row.getVisibleCells().length, className: "p-0", children: _jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-4 text-sm text-muted-foreground", children: [_jsx("span", { children: String(groupValue) }), formattedGroupedTotal !== null && (_jsx("span", { className: "font-semibold text-foreground", children: formattedGroupedTotal }))] }) }) }));
|
|
14
49
|
}
|