infinity-ui-elements 1.7.9 → 1.7.11
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/components/Table/Table.d.ts +7 -1
- package/dist/components/Table/Table.d.ts.map +1 -1
- package/dist/components/Table/Table.stories.d.ts +2 -0
- package/dist/components/Table/Table.stories.d.ts.map +1 -1
- package/dist/components/Table/TableBody.d.ts +7 -1
- package/dist/components/Table/TableBody.d.ts.map +1 -1
- package/dist/components/Table/TableHeader.d.ts +7 -1
- package/dist/components/Table/TableHeader.d.ts.map +1 -1
- package/dist/index.esm.js +63 -15
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +63 -15
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -30,8 +30,14 @@ export interface TableProps<TData extends RowData> extends React.HTMLAttributes<
|
|
|
30
30
|
hideColumnsOnDetailOpen?: number;
|
|
31
31
|
selectedRowId?: string;
|
|
32
32
|
onRowSelectionChange?: (rowId: string | null) => void;
|
|
33
|
+
loading?: boolean;
|
|
34
|
+
loadingSkeletonRows?: number;
|
|
35
|
+
loadingSkeletonHeight?: number | string;
|
|
36
|
+
columnWidths?: Partial<Record<string, string | number>>;
|
|
37
|
+
columnMinWidths?: Partial<Record<string, string | number>>;
|
|
38
|
+
columnMaxWidths?: Partial<Record<string, string | number>>;
|
|
33
39
|
}
|
|
34
|
-
declare function TableComponent<TData extends RowData>({ className, wrapperClassName, containerClassName, variant, size, table, enableRowSelection, enableSelectAll, isLoading, loadingComponent, emptyComponent, enableHorizontalScroll, stickyHeader, maxHeight, showRowHover, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground, detailPanel, hideColumnsOnDetailOpen, selectedRowId, onRowSelectionChange, ...props }: TableProps<TData>, ref: React.ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
declare function TableComponent<TData extends RowData>({ className, wrapperClassName, containerClassName, variant, size, table, enableRowSelection, enableSelectAll, isLoading, loading, loadingComponent, emptyComponent, enableHorizontalScroll, stickyHeader, maxHeight, showRowHover, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground, detailPanel, hideColumnsOnDetailOpen, selectedRowId, onRowSelectionChange, loadingSkeletonRows, loadingSkeletonHeight, columnWidths, columnMinWidths, columnMaxWidths, ...props }: TableProps<TData>, ref: React.ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
35
41
|
export declare const Table: <TData extends RowData>(props: TableProps<TData> & {
|
|
36
42
|
ref?: React.ForwardedRef<HTMLDivElement>;
|
|
37
43
|
}) => ReturnType<typeof TableComponent>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,KAAK,IAAI,aAAa,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAK7E,OAAO,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,6 +17,8 @@ export declare const StickyHeader: Story;
|
|
|
17
17
|
export declare const StickyHeaderScrollableContainer: Story;
|
|
18
18
|
export declare const WithRowClick: Story;
|
|
19
19
|
export declare const HorizontalScroll: Story;
|
|
20
|
+
export declare const CustomColumnWidths: Story;
|
|
21
|
+
export declare const LoadingSkeleton: Story;
|
|
20
22
|
export declare const WithoutHeaderBackground: Story;
|
|
21
23
|
export declare const WithHeaderBackground: Story;
|
|
22
24
|
export declare const WithDetailPanel: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAyThC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAO5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,YAAY,EAAE,KAmC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAgC9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAgD5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyB5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAkB1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAyC9B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiC1B,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KAyC7C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA6B9B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAyBrC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAyBlC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgJ7B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAoH1C,CAAC"}
|
|
1
|
+
{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAyThC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAO5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,YAAY,EAAE,KAmC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAgC9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAgD5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyB5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAkB1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAyC9B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiC1B,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KAyC7C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA6B9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAuChC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAyBrC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAyBlC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgJ7B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAoH1C,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import { type Row } from "@tanstack/react-table";
|
|
2
3
|
interface TableBodyProps<TData> {
|
|
3
4
|
rows: Row<TData>[];
|
|
@@ -12,7 +13,12 @@ interface TableBodyProps<TData> {
|
|
|
12
13
|
onRowClick?: (row: TData) => void;
|
|
13
14
|
getRowClassName: (row: TData) => string;
|
|
14
15
|
handleRowClick: (row: TData, rowId: string) => void;
|
|
16
|
+
getColumnStyle: (columnId: string, fallback?: {
|
|
17
|
+
width?: number;
|
|
18
|
+
minWidth?: number;
|
|
19
|
+
maxWidth?: number;
|
|
20
|
+
}) => React.CSSProperties;
|
|
15
21
|
}
|
|
16
|
-
export declare function TableBody<TData>({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, }: TableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare function TableBody<TData>({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, getColumnStyle, }: TableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
17
23
|
export {};
|
|
18
24
|
//# sourceMappingURL=TableBody.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableBody.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAK7D,UAAU,cAAc,CAAC,KAAK;IAC5B,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,OAAO,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC5C,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,eAAe,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC;IACxC,cAAc,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,cAAc,EAAE,CACd,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,KAChE,KAAK,CAAC,aAAa,CAAC;CAC1B;AAOD,wBAAgB,SAAS,CAAC,KAAK,EAAE,EAC/B,IAAI,EACJ,kBAAkB,EAClB,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,sBAAsB,EACtB,UAAU,EACV,eAAe,EACf,cAAc,EACd,cAAc,GACf,EAAE,cAAc,CAAC,KAAK,CAAC,2CAsFvB"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import { type HeaderGroup } from "@tanstack/react-table";
|
|
2
3
|
interface TableHeaderProps<TData> {
|
|
3
4
|
headerGroups: HeaderGroup<TData>[];
|
|
@@ -12,7 +13,12 @@ interface TableHeaderProps<TData> {
|
|
|
12
13
|
onToggleAllRows: (e?: unknown) => void;
|
|
13
14
|
isAllRowsSelected: boolean;
|
|
14
15
|
isSomeRowsSelected: boolean;
|
|
16
|
+
getColumnStyle: (columnId: string, fallback?: {
|
|
17
|
+
width?: number;
|
|
18
|
+
minWidth?: number;
|
|
19
|
+
maxWidth?: number;
|
|
20
|
+
}) => React.CSSProperties;
|
|
15
21
|
}
|
|
16
|
-
export declare function TableHeader<TData>({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, }: TableHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare function TableHeader<TData>({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, getColumnStyle, }: TableHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
17
23
|
export {};
|
|
18
24
|
//# sourceMappingURL=TableHeader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHeader.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,uBAAuB,CAAC;AAK/B,UAAU,gBAAgB,CAAC,KAAK;IAC9B,YAAY,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;IACnC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,eAAe,EAAE,OAAO,CAAC;IACzB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,CACd,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,KAChE,KAAK,CAAC,aAAa,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,EACjC,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,oBAAoB,EACpB,YAAY,EACZ,IAAI,EACJ,eAAe,EACf,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,GACf,EAAE,gBAAgB,CAAC,KAAK,CAAC,2CAuGzB"}
|
package/dist/index.esm.js
CHANGED
|
@@ -2835,7 +2835,7 @@ const tableCellVariants = cva("text-body-medium-regular border-b border-surface-
|
|
|
2835
2835
|
},
|
|
2836
2836
|
});
|
|
2837
2837
|
|
|
2838
|
-
function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, }) {
|
|
2838
|
+
function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, getColumnStyle, }) {
|
|
2839
2839
|
const headerHeight = {
|
|
2840
2840
|
small: 32,
|
|
2841
2841
|
medium: 40,
|
|
@@ -2852,9 +2852,11 @@ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHe
|
|
|
2852
2852
|
"bg-surface-fill-neutral-moderate border-none", stickyHeader && "sticky z-20", !enableRowSelection && index === 0 && "rounded-tl-xlarge ", isLastVisibleColumn && "rounded-tr-xlarge", header.column.columnDef.meta?.headerClassName, headerClassName, "transition-all duration-300 ease-in-out", shouldHideColumn
|
|
2853
2853
|
? "opacity-0 translate-x-8 pointer-events-none"
|
|
2854
2854
|
: "opacity-100 translate-x-0"), style: {
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2855
|
+
...getColumnStyle(header.column.id, {
|
|
2856
|
+
width: header.getSize(),
|
|
2857
|
+
minWidth: header.column.columnDef.minSize,
|
|
2858
|
+
maxWidth: header.column.columnDef.maxSize,
|
|
2859
|
+
}),
|
|
2858
2860
|
top: stickyTop,
|
|
2859
2861
|
}, children: header.isPlaceholder ? null : (jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() &&
|
|
2860
2862
|
"cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsx("span", { className: "text-surface-ink-neutral-muted", children: {
|
|
@@ -2865,7 +2867,7 @@ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHe
|
|
|
2865
2867
|
}) }));
|
|
2866
2868
|
}
|
|
2867
2869
|
|
|
2868
|
-
function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, }) {
|
|
2870
|
+
function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, getColumnStyle, }) {
|
|
2869
2871
|
const [focusedCell, setFocusedCell] = React.useState(null);
|
|
2870
2872
|
const [hoveredRow, setHoveredRow] = React.useState(null);
|
|
2871
2873
|
return (jsx("tbody", { className: cn("bg-surface-fill-neutral-intense"), children: rows.map((row) => {
|
|
@@ -2883,11 +2885,11 @@ function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cell
|
|
|
2883
2885
|
const cellState = isCellFocused ? "focus" : "default";
|
|
2884
2886
|
return (jsx("td", { className: cn(tableCellVariants({ size, state: cellState }), cell.column.columnDef.meta?.cellClassName, cellClassName, "transition-all duration-300 ease-in-out", shouldHideColumn
|
|
2885
2887
|
? "opacity-0 translate-x-8 pointer-events-none"
|
|
2886
|
-
: "opacity-100 translate-x-0"), style: {
|
|
2888
|
+
: "opacity-100 translate-x-0"), style: getColumnStyle(cell.column.id, {
|
|
2887
2889
|
width: cell.column.getSize(),
|
|
2888
2890
|
minWidth: cell.column.columnDef.minSize,
|
|
2889
2891
|
maxWidth: cell.column.columnDef.maxSize,
|
|
2890
|
-
}, tabIndex: 0, onFocus: () => setFocusedCell({ rowId: row.id, cellId: cell.id }), onBlur: () => setFocusedCell(null), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
2892
|
+
}), tabIndex: 0, onFocus: () => setFocusedCell({ rowId: row.id, cellId: cell.id }), onBlur: () => setFocusedCell(null), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
2891
2893
|
})] }, row.id));
|
|
2892
2894
|
}) }));
|
|
2893
2895
|
}
|
|
@@ -2909,7 +2911,7 @@ function renderDefaultEmptyState({ colSpan }) {
|
|
|
2909
2911
|
}
|
|
2910
2912
|
|
|
2911
2913
|
// ==================== Component ====================
|
|
2912
|
-
function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, detailPanel, hideColumnsOnDetailOpen = 3, selectedRowId, onRowSelectionChange, ...props }, ref) {
|
|
2914
|
+
function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loading, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, detailPanel, hideColumnsOnDetailOpen = 3, selectedRowId, onRowSelectionChange, loadingSkeletonRows, loadingSkeletonHeight, columnWidths, columnMinWidths, columnMaxWidths, ...props }, ref) {
|
|
2913
2915
|
// ==================== State ====================
|
|
2914
2916
|
const [internalSelectedRowId, setInternalSelectedRowId] = React.useState(null);
|
|
2915
2917
|
const selectedRowIdRef = React.useRef(null);
|
|
@@ -2950,6 +2952,21 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
|
|
|
2950
2952
|
? headers.length - hideColumnsOnDetailOpen
|
|
2951
2953
|
: headers.length;
|
|
2952
2954
|
}, [isDetailPanelOpen, headers.length, hideColumnsOnDetailOpen]);
|
|
2955
|
+
const normalizeSizeValue = (value) => {
|
|
2956
|
+
if (value === undefined)
|
|
2957
|
+
return undefined;
|
|
2958
|
+
return typeof value === "number" ? `${value}px` : value;
|
|
2959
|
+
};
|
|
2960
|
+
const getColumnStyle = React.useCallback((columnId, fallback) => {
|
|
2961
|
+
const width = columnWidths?.[columnId] ?? fallback?.width ?? undefined;
|
|
2962
|
+
const minWidth = columnMinWidths?.[columnId] ?? fallback?.minWidth ?? undefined;
|
|
2963
|
+
const maxWidth = columnMaxWidths?.[columnId] ?? fallback?.maxWidth ?? undefined;
|
|
2964
|
+
return {
|
|
2965
|
+
width: normalizeSizeValue(width),
|
|
2966
|
+
minWidth: normalizeSizeValue(minWidth),
|
|
2967
|
+
maxWidth: normalizeSizeValue(maxWidth),
|
|
2968
|
+
};
|
|
2969
|
+
}, [columnWidths, columnMinWidths, columnMaxWidths]);
|
|
2953
2970
|
const containerStyle = React.useMemo(() => {
|
|
2954
2971
|
if (!maxHeight)
|
|
2955
2972
|
return undefined;
|
|
@@ -2957,6 +2974,43 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
|
|
|
2957
2974
|
maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
|
|
2958
2975
|
};
|
|
2959
2976
|
}, [maxHeight]);
|
|
2977
|
+
const resolvedLoading = typeof loading === "boolean" ? loading : Boolean(isLoading);
|
|
2978
|
+
const skeletonRowCount = loadingSkeletonRows ?? 5;
|
|
2979
|
+
const sizeKey = size || "medium";
|
|
2980
|
+
const skeletonHeightMap = {
|
|
2981
|
+
small: 16,
|
|
2982
|
+
medium: 20,
|
|
2983
|
+
large: 24,
|
|
2984
|
+
};
|
|
2985
|
+
const skeletonCellHeight = normalizeSizeValue(loadingSkeletonHeight ?? skeletonHeightMap[sizeKey]);
|
|
2986
|
+
const selectionSkeletonSize = sizeKey === "small" ? 14 : sizeKey === "large" ? 20 : 16;
|
|
2987
|
+
const renderSkeletonRows = React.useCallback(() => {
|
|
2988
|
+
const visibleColumns = table.getVisibleLeafColumns();
|
|
2989
|
+
if (visibleColumns.length === 0) {
|
|
2990
|
+
return renderDefaultLoadingState({
|
|
2991
|
+
colSpan: table.getAllColumns().length || 1,
|
|
2992
|
+
});
|
|
2993
|
+
}
|
|
2994
|
+
return Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (jsxs("tr", { children: [enableRowSelection && (jsx("td", { className: cn(tableCellVariants({ size: sizeKey }), "w-10", cellClassName), children: jsx(Skeleton, { variant: "circle", width: selectionSkeletonSize, height: selectionSkeletonSize }) })), visibleColumns.map((column) => (jsx("td", { className: cn(tableCellVariants({ size: sizeKey }), column.columnDef.meta?.cellClassName, cellClassName), style: getColumnStyle(column.id, {
|
|
2995
|
+
width: column.getSize(),
|
|
2996
|
+
minWidth: column.columnDef.minSize,
|
|
2997
|
+
maxWidth: column.columnDef.maxSize,
|
|
2998
|
+
}), children: jsx(Skeleton, { className: "w-full", height: skeletonCellHeight, rounded: "medium" }) }, `${column.id}-${rowIndex}`)))] }, `skeleton-row-${rowIndex}`)));
|
|
2999
|
+
}, [
|
|
3000
|
+
cellClassName,
|
|
3001
|
+
enableRowSelection,
|
|
3002
|
+
getColumnStyle,
|
|
3003
|
+
selectionSkeletonSize,
|
|
3004
|
+
sizeKey,
|
|
3005
|
+
skeletonCellHeight,
|
|
3006
|
+
skeletonRowCount,
|
|
3007
|
+
table,
|
|
3008
|
+
]);
|
|
3009
|
+
const renderLoadingContent = React.useCallback(() => {
|
|
3010
|
+
if (loadingComponent)
|
|
3011
|
+
return loadingComponent;
|
|
3012
|
+
return renderSkeletonRows();
|
|
3013
|
+
}, [loadingComponent, renderSkeletonRows]);
|
|
2960
3014
|
// ==================== Callbacks ====================
|
|
2961
3015
|
const getRowClassName = React.useCallback((row) => {
|
|
2962
3016
|
if (typeof rowClassName === "function") {
|
|
@@ -2993,19 +3047,13 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
|
|
|
2993
3047
|
onRowSelectionChange(null);
|
|
2994
3048
|
}
|
|
2995
3049
|
};
|
|
2996
|
-
// ==================== Render Helpers ====================
|
|
2997
|
-
const renderLoadingState = () => {
|
|
2998
|
-
if (loadingComponent)
|
|
2999
|
-
return loadingComponent;
|
|
3000
|
-
return renderDefaultLoadingState({ colSpan: table.getAllColumns().length });
|
|
3001
|
-
};
|
|
3002
3050
|
const renderEmptyState = () => {
|
|
3003
3051
|
if (emptyComponent)
|
|
3004
3052
|
return emptyComponent;
|
|
3005
3053
|
return renderDefaultEmptyState({ colSpan: table.getAllColumns().length });
|
|
3006
3054
|
};
|
|
3007
3055
|
// ==================== Render ====================
|
|
3008
|
-
return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxs("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: [jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected() }),
|
|
3056
|
+
return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxs("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: [jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), resolvedLoading ? (jsx("tbody", { children: renderLoadingContent() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, effectiveSelectedRowId: effectiveSelectedRowId, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }), detailPanel && (jsx(DetailPanel, { isOpen: isDetailPanelOpen, content: detailPanel, data: getSelectedRowData(), onClose: handleDetailPanelClose }))] }) }));
|
|
3009
3057
|
}
|
|
3010
3058
|
// ==================== Export ====================
|
|
3011
3059
|
const Table = React.forwardRef(TableComponent);
|