periplo-ui 3.22.1 → 3.22.2
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/DataTable/DataTable.js +0 -1
- package/dist/components/DataTable/DataTable.js.map +1 -1
- package/dist/components/DataTable/components/DataTableBody.d.ts +1 -2
- package/dist/components/DataTable/components/DataTableBody.js +18 -14
- package/dist/components/DataTable/components/DataTableBody.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/no-dynamic-delete */\n'use client'\n\nimport {\n flexRender,\n getCoreRowModel,\n getPaginationRowModel,\n useReactTable,\n VisibilityState,\n Row,\n PaginationState,\n Updater,\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table as TableComponent, TableHeader, TableHead, TableRow } from '../Table'\nimport { Typography } from '../Typography'\n\nimport { DataTableBody } from './components/DataTableBody'\nimport { DataTablePagination } from './components/DataTablePagination'\nimport { DataTableRowSelector } from './components/DataTableRowSelector'\nimport { DataTableSelectHeader } from './components/DataTableSelectHeader'\nimport { DataTableToolbar } from './components/DataTableToolbar'\nimport { useSelection } from './hooks/useSelection'\nimport { DataTableProps } from './types'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * A feature-rich data table component built on top of TanStack Table.\n * Provides sorting, filtering, pagination, and column visibility controls.\n */\nexport function DataTable<TData extends object>({\n columns: userColumns,\n data,\n getRowId = (row: TData) => (row as { id: string }).id,\n showColumnVisibilityControls = true,\n isLoading = false,\n pagination,\n primaryFilters,\n secondaryFilters,\n activePrimaryFiltersCount = 0,\n activeSecondaryFiltersCount = 0,\n selection,\n labels = {\n columnVisibilityButton: 'Hide columns',\n filters: 'Filters',\n moreFilters: 'More filters',\n },\n className,\n tableClassName,\n}: DataTableProps<TData>) {\n const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})\n const [pageIndex, setPageIndex] = React.useState(0)\n\n const isBackendPagination = pagination !== undefined && 'onPageChange' in pagination\n\n const total = isBackendPagination ? pagination.total : data.length\n const pageSize = pagination?.pageSize ?? (isLoading ? 10 : data.length)\n const totalPages = Math.ceil(total / pageSize)\n\n const { selectedIds, handleRowSelect, handleSelectAll } = useSelection({\n data,\n getRowId,\n selection,\n })\n\n const rowSelection = React.useMemo(\n () => Object.fromEntries(Array.from(selectedIds).map((id) => [id, true])),\n [selectedIds],\n )\n\n const SelectColumnHeader = React.useCallback(\n () => (\n <DataTableSelectHeader\n isBackendPagination={isBackendPagination}\n selectedIds={selectedIds}\n data={data}\n handleSelectAll={handleSelectAll}\n isLoading={isLoading}\n />\n ),\n [isBackendPagination, selectedIds, data, handleSelectAll, isLoading],\n )\n\n const SelectColumnCell = React.useCallback(\n ({ row }: { row: Row<TData> }) => (\n <DataTableRowSelector row={row} selectedIds={selectedIds} getRowId={getRowId} handleRowSelect={handleRowSelect} />\n ),\n [selectedIds, getRowId, handleRowSelect],\n )\n\n const tableColumns = React.useMemo(() => {\n const baseColumns = [...userColumns]\n if (selection !== undefined) {\n const selectColumn = {\n id: 'select',\n size: 50,\n cell: SelectColumnCell,\n header: SelectColumnHeader,\n }\n baseColumns.unshift(selectColumn)\n }\n return baseColumns\n }, [userColumns, selection, SelectColumnCell, SelectColumnHeader])\n\n const toolbarSelectionProps = React.useMemo(() => {\n if (isBackendPagination && selection) {\n return {\n isSelectionStarted: selection.isSelectionStarted,\n onSelectionStart: selection.onSelectionStart,\n onSelectionCancel: selection.onSelectionCancel,\n selectionSummary: selection.labels?.selectionSummary,\n labels: selection.labels,\n }\n }\n return undefined\n }, [isBackendPagination, selection])\n\n const currentPage = isBackendPagination ? pagination.currentPage : pageIndex + 1\n const handlePageChange = isBackendPagination ? pagination.onPageChange : (page: number) => setPageIndex(page - 1)\n\n const tablePaginationState = React.useMemo(() => {\n if (!pagination) {\n return undefined\n }\n return {\n pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,\n pageSize,\n }\n }, [pagination, isBackendPagination, pageIndex, pageSize])\n\n const tableGetPaginationRowModel = React.useMemo(() => {\n return pagination && !isBackendPagination ? getPaginationRowModel() : undefined\n }, [pagination, isBackendPagination])\n\n const tableOnPaginationChange = React.useCallback(\n (updater: Updater<PaginationState>) => {\n if (typeof updater === 'function') {\n const newState = updater({ pageIndex, pageSize })\n setPageIndex(newState.pageIndex)\n }\n },\n [pageIndex, pageSize, setPageIndex],\n )\n\n const table = useReactTable({\n data,\n columns: tableColumns,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: tableGetPaginationRowModel,\n onColumnVisibilityChange: setColumnVisibility,\n enableRowSelection: !!selection,\n getRowId: getRowId,\n state: {\n columnVisibility,\n rowSelection,\n pagination: tablePaginationState,\n },\n manualPagination: isBackendPagination,\n onPaginationChange: isBackendPagination ? undefined : tableOnPaginationChange,\n })\n\n return (\n <div className={cn('flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden', className)}>\n <DataTableToolbar\n table={table}\n showColumnVisibilityControls={showColumnVisibilityControls}\n primaryFilters={primaryFilters}\n secondaryFilters={secondaryFilters}\n activePrimaryFiltersCount={activePrimaryFiltersCount}\n activeSecondaryFiltersCount={activeSecondaryFiltersCount}\n labels={labels}\n selection={toolbarSelectionProps}\n />\n\n <div className=\"flex min-h-0 flex-1 flex-col rounded-md border bg-white\">\n <div className=\"min-h-0 flex-1 overflow-auto\">\n <div className=\"h-full overflow-auto\">\n <TableComponent className=\"w-full overscroll-contain\" tableClassName={cn('table-fixed ', tableClassName)}>\n <TableHeader className=\"sticky top-0 z-10 bg-neutral-50\">\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => (\n <TableHead\n key={header.id}\n className=\"whitespace-normal\"\n style={{ width: header.column.columnDef.size }}\n >\n <Typography weight=\"medium\">\n {header.isPlaceholder\n ? null\n : flexRender(header.column.columnDef.header, header.getContext())}\n </Typography>\n </TableHead>\n ))}\n </TableRow>\n ))}\n </TableHeader>\n <DataTableBody\n table={table}\n isLoading={isLoading}\n
|
|
1
|
+
{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/no-dynamic-delete */\n'use client'\n\nimport {\n flexRender,\n getCoreRowModel,\n getPaginationRowModel,\n useReactTable,\n VisibilityState,\n Row,\n PaginationState,\n Updater,\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table as TableComponent, TableHeader, TableHead, TableRow } from '../Table'\nimport { Typography } from '../Typography'\n\nimport { DataTableBody } from './components/DataTableBody'\nimport { DataTablePagination } from './components/DataTablePagination'\nimport { DataTableRowSelector } from './components/DataTableRowSelector'\nimport { DataTableSelectHeader } from './components/DataTableSelectHeader'\nimport { DataTableToolbar } from './components/DataTableToolbar'\nimport { useSelection } from './hooks/useSelection'\nimport { DataTableProps } from './types'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * A feature-rich data table component built on top of TanStack Table.\n * Provides sorting, filtering, pagination, and column visibility controls.\n */\nexport function DataTable<TData extends object>({\n columns: userColumns,\n data,\n getRowId = (row: TData) => (row as { id: string }).id,\n showColumnVisibilityControls = true,\n isLoading = false,\n pagination,\n primaryFilters,\n secondaryFilters,\n activePrimaryFiltersCount = 0,\n activeSecondaryFiltersCount = 0,\n selection,\n labels = {\n columnVisibilityButton: 'Hide columns',\n filters: 'Filters',\n moreFilters: 'More filters',\n },\n className,\n tableClassName,\n}: DataTableProps<TData>) {\n const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})\n const [pageIndex, setPageIndex] = React.useState(0)\n\n const isBackendPagination = pagination !== undefined && 'onPageChange' in pagination\n\n const total = isBackendPagination ? pagination.total : data.length\n const pageSize = pagination?.pageSize ?? (isLoading ? 10 : data.length)\n const totalPages = Math.ceil(total / pageSize)\n\n const { selectedIds, handleRowSelect, handleSelectAll } = useSelection({\n data,\n getRowId,\n selection,\n })\n\n const rowSelection = React.useMemo(\n () => Object.fromEntries(Array.from(selectedIds).map((id) => [id, true])),\n [selectedIds],\n )\n\n const SelectColumnHeader = React.useCallback(\n () => (\n <DataTableSelectHeader\n isBackendPagination={isBackendPagination}\n selectedIds={selectedIds}\n data={data}\n handleSelectAll={handleSelectAll}\n isLoading={isLoading}\n />\n ),\n [isBackendPagination, selectedIds, data, handleSelectAll, isLoading],\n )\n\n const SelectColumnCell = React.useCallback(\n ({ row }: { row: Row<TData> }) => (\n <DataTableRowSelector row={row} selectedIds={selectedIds} getRowId={getRowId} handleRowSelect={handleRowSelect} />\n ),\n [selectedIds, getRowId, handleRowSelect],\n )\n\n const tableColumns = React.useMemo(() => {\n const baseColumns = [...userColumns]\n if (selection !== undefined) {\n const selectColumn = {\n id: 'select',\n size: 50,\n cell: SelectColumnCell,\n header: SelectColumnHeader,\n }\n baseColumns.unshift(selectColumn)\n }\n return baseColumns\n }, [userColumns, selection, SelectColumnCell, SelectColumnHeader])\n\n const toolbarSelectionProps = React.useMemo(() => {\n if (isBackendPagination && selection) {\n return {\n isSelectionStarted: selection.isSelectionStarted,\n onSelectionStart: selection.onSelectionStart,\n onSelectionCancel: selection.onSelectionCancel,\n selectionSummary: selection.labels?.selectionSummary,\n labels: selection.labels,\n }\n }\n return undefined\n }, [isBackendPagination, selection])\n\n const currentPage = isBackendPagination ? pagination.currentPage : pageIndex + 1\n const handlePageChange = isBackendPagination ? pagination.onPageChange : (page: number) => setPageIndex(page - 1)\n\n const tablePaginationState = React.useMemo(() => {\n if (!pagination) {\n return undefined\n }\n return {\n pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,\n pageSize,\n }\n }, [pagination, isBackendPagination, pageIndex, pageSize])\n\n const tableGetPaginationRowModel = React.useMemo(() => {\n return pagination && !isBackendPagination ? getPaginationRowModel() : undefined\n }, [pagination, isBackendPagination])\n\n const tableOnPaginationChange = React.useCallback(\n (updater: Updater<PaginationState>) => {\n if (typeof updater === 'function') {\n const newState = updater({ pageIndex, pageSize })\n setPageIndex(newState.pageIndex)\n }\n },\n [pageIndex, pageSize, setPageIndex],\n )\n\n const table = useReactTable({\n data,\n columns: tableColumns,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: tableGetPaginationRowModel,\n onColumnVisibilityChange: setColumnVisibility,\n enableRowSelection: !!selection,\n getRowId: getRowId,\n state: {\n columnVisibility,\n rowSelection,\n pagination: tablePaginationState,\n },\n manualPagination: isBackendPagination,\n onPaginationChange: isBackendPagination ? undefined : tableOnPaginationChange,\n })\n\n return (\n <div className={cn('flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden', className)}>\n <DataTableToolbar\n table={table}\n showColumnVisibilityControls={showColumnVisibilityControls}\n primaryFilters={primaryFilters}\n secondaryFilters={secondaryFilters}\n activePrimaryFiltersCount={activePrimaryFiltersCount}\n activeSecondaryFiltersCount={activeSecondaryFiltersCount}\n labels={labels}\n selection={toolbarSelectionProps}\n />\n\n <div className=\"flex min-h-0 flex-1 flex-col rounded-md border bg-white\">\n <div className=\"min-h-0 flex-1 overflow-auto\">\n <div className=\"h-full overflow-auto\">\n <TableComponent className=\"w-full overscroll-contain\" tableClassName={cn('table-fixed ', tableClassName)}>\n <TableHeader className=\"sticky top-0 z-10 bg-neutral-50\">\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => (\n <TableHead\n key={header.id}\n className=\"whitespace-normal\"\n style={{ width: header.column.columnDef.size }}\n >\n <Typography weight=\"medium\">\n {header.isPlaceholder\n ? null\n : flexRender(header.column.columnDef.header, header.getContext())}\n </Typography>\n </TableHead>\n ))}\n </TableRow>\n ))}\n </TableHeader>\n <DataTableBody\n table={table}\n isLoading={isLoading}\n pageSize={pageSize}\n getRowId={getRowId}\n rowSelection={rowSelection}\n isSelectionStarted={selection?.isSelectionStarted ?? false}\n />\n </TableComponent>\n </div>\n </div>\n {!!pagination && (\n <div className=\"border-t px-4 py-2\">\n <DataTablePagination\n table={table}\n total={total}\n pageSize={pageSize}\n currentPage={currentPage}\n totalPages={totalPages}\n onPageChange={handlePageChange}\n isLoading={pagination.isLoading}\n labels={pagination.labels}\n />\n </div>\n )}\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAiCO;AAAyC;AACrC;AACT;AACmD;AACpB;AACnB;AACZ;AACA;AACA;AAC4B;AACE;AAC9B;AACS;AACiB;AACf;AACI;AACf;AACA;AAEF;AACE;AACA;AAEA;AAEA;AACA;AACA;AAEA;AAAuE;AACrE;AACA;AACA;AAGF;AAA2B;AAC+C;AAC5D;AAGd;AAAiC;AAE7B;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AAAA;AACF;AAEiE;AAGrE;AAA+B;AAEqF;AAE3E;AAGzC;AACE;AACA;AACE;AAAqB;AACf;AACE;AACA;AACE;AAEV;AAAgC;AAElC;AAAO;AAGT;AACE;AACE;AAAO;AACyB;AACF;AACC;AACO;AAClB;AACpB;AAEF;AAAO;AAGT;AACA;AAEA;AACE;AACE;AAAO;AAET;AAAO;AACyD;AAC9D;AACF;AAGF;AACE;AAAsE;AAGxE;AAAsC;AAElC;AACE;AACA;AAA+B;AACjC;AACF;AACkC;AAGpC;AAA4B;AAC1B;AACS;AACwB;AACV;AACG;AACJ;AACtB;AACO;AACL;AACA;AACY;AACd;AACkB;AACoC;AAGxD;AAEI;AAAA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AAAA;AACb;AAGE;AAGM;AAIQ;AAAC;AAAA;AAEW;AACmC;AAM7C;AAAA;AARY;AAatB;AACA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACqD;AAAA;AACvD;AAGN;AAGI;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACc;AACQ;AACH;AAAA;AAEvB;AAEJ;AAGN;;"}
|
|
@@ -3,11 +3,10 @@ import { RowIdentifierFn } from '../types';
|
|
|
3
3
|
type DataTableBodyProps<TData> = {
|
|
4
4
|
readonly table: Table<TData>;
|
|
5
5
|
readonly isLoading?: boolean;
|
|
6
|
-
readonly isSelectable?: boolean;
|
|
7
6
|
readonly pageSize: number;
|
|
8
7
|
readonly getRowId: RowIdentifierFn<TData>;
|
|
9
8
|
readonly rowSelection: Record<string, boolean>;
|
|
10
9
|
readonly isSelectionStarted: boolean;
|
|
11
10
|
};
|
|
12
|
-
export declare function DataTableBody<TData>({ table, isLoading,
|
|
11
|
+
export declare function DataTableBody<TData>({ table, isLoading, pageSize, getRowId, rowSelection, isSelectionStarted, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
13
12
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { flexRender } from '@tanstack/react-table';
|
|
3
3
|
import { Skeleton } from '../../Skeleton/Skeleton.js';
|
|
4
4
|
import { TableBody, TableRow, TableCell } from '../../Table/Table.js';
|
|
@@ -14,28 +14,32 @@ function TableRowComponent({
|
|
|
14
14
|
function DataTableBody({
|
|
15
15
|
table,
|
|
16
16
|
isLoading,
|
|
17
|
-
isSelectable,
|
|
18
17
|
pageSize,
|
|
19
18
|
getRowId,
|
|
20
19
|
rowSelection,
|
|
21
20
|
isSelectionStarted
|
|
22
21
|
}) {
|
|
23
22
|
if (isLoading) {
|
|
24
|
-
return /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: pageSize }).map((_unused, index) => /* @__PURE__ */
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
return /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: pageSize }).map((_unused, index) => /* @__PURE__ */ jsx(TableRow, { children: table.getAllColumns().filter((column) => column.getIsVisible()).map((column) => {
|
|
24
|
+
let skeletonClass = "h-[20px] w-full";
|
|
25
|
+
if (column.id === "actions") skeletonClass = "h-8 w-8 shrink-0";
|
|
26
|
+
else if (column.id === "select") skeletonClass = "h-5 w-5 shrink-0";
|
|
27
|
+
let justifyClass = "justify-center";
|
|
28
|
+
if (column.id === "actions") justifyClass = "justify-end";
|
|
29
|
+
else if (column.id === "select") justifyClass = "justify-start";
|
|
30
|
+
return /* @__PURE__ */ jsx(
|
|
31
|
+
TableCell,
|
|
32
|
+
{
|
|
33
|
+
style: { width: column.columnDef.size },
|
|
34
|
+
children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center", justifyClass), children: /* @__PURE__ */ jsx(Skeleton, { className: cn(skeletonClass) }) })
|
|
35
|
+
},
|
|
36
|
+
`skeleton-cell-${String(index)}-${column.id}`
|
|
37
|
+
);
|
|
38
|
+
}) }, `skeleton-row-${String(index)}`)) });
|
|
28
39
|
}
|
|
29
40
|
const rows = table.getRowModel().rows;
|
|
30
41
|
if (!rows.length) {
|
|
31
|
-
return /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
|
|
32
|
-
TableCell,
|
|
33
|
-
{
|
|
34
|
-
colSpan: isSelectable ? table.getAllColumns().length + 1 : table.getAllColumns().length,
|
|
35
|
-
className: "h-[200px] text-center",
|
|
36
|
-
children: /* @__PURE__ */ jsx(Typography, { color: "neutral", children: "No data available" })
|
|
37
|
-
}
|
|
38
|
-
) }) });
|
|
42
|
+
return /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: table.getAllColumns().length, className: "h-[200px] text-center", children: /* @__PURE__ */ jsx(Typography, { color: "neutral", children: "No data available" }) }) }) });
|
|
39
43
|
}
|
|
40
44
|
return /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => {
|
|
41
45
|
const rowId = getRowId(row.original);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { Table, flexRender, Row } from '@tanstack/react-table'\n\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\nimport { RowIdentifierFn } from '../types'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableBodyProps<TData> = {\n readonly table: Table<TData>\n readonly isLoading?: boolean\n readonly
|
|
1
|
+
{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { Table, flexRender, Row } from '@tanstack/react-table'\n\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\nimport { RowIdentifierFn } from '../types'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableBodyProps<TData> = {\n readonly table: Table<TData>\n readonly isLoading?: boolean\n readonly pageSize: number\n readonly getRowId: RowIdentifierFn<TData>\n readonly rowSelection: Record<string, boolean>\n readonly isSelectionStarted: boolean\n}\n\ntype TableRowProps<TData> = {\n readonly row: Row<TData>\n readonly isSelectable: boolean\n readonly isSelected: boolean\n readonly isSelectionStarted: boolean\n readonly getRowId: (row: TData) => string\n readonly handleRowSelect: (checked: boolean, row: TData) => void\n}\n\nfunction TableRowComponent<TData>({\n row,\n isSelected,\n}: Readonly<Omit<TableRowProps<TData>, 'isSelectable' | 'getRowId' | 'handleRowSelect'>>) {\n return (\n <TableRow data-selected={isSelected}>\n {row.getVisibleCells().map((cell) => (\n <TableCell key={cell.id} style={{ width: cell.column.columnDef.size }}>\n <Typography>\n {cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Typography>\n </TableCell>\n ))}\n </TableRow>\n )\n}\n\nexport function DataTableBody<TData>({\n table,\n isLoading,\n pageSize,\n getRowId,\n rowSelection,\n isSelectionStarted,\n}: DataTableBodyProps<TData>) {\n if (isLoading) {\n return (\n <TableBody>\n {Array.from({ length: pageSize }).map((_unused, index) => (\n <TableRow key={`skeleton-row-${String(index)}`}>\n {table\n .getAllColumns()\n .filter((column) => column.getIsVisible())\n .map((column) => {\n let skeletonClass = 'h-[20px] w-full'\n if (column.id === 'actions') skeletonClass = 'h-8 w-8 shrink-0'\n else if (column.id === 'select') skeletonClass = 'h-5 w-5 shrink-0'\n\n let justifyClass = 'justify-center'\n if (column.id === 'actions') justifyClass = 'justify-end'\n else if (column.id === 'select') justifyClass = 'justify-start'\n\n return (\n <TableCell\n key={`skeleton-cell-${String(index)}-${column.id}`}\n style={{ width: column.columnDef.size }}\n >\n <div className={cn('flex items-center', justifyClass)}>\n <Skeleton className={cn(skeletonClass)} />\n </div>\n </TableCell>\n )\n })}\n </TableRow>\n ))}\n </TableBody>\n )\n }\n\n const rows = table.getRowModel().rows\n\n if (!rows.length) {\n return (\n <TableBody>\n <TableRow>\n <TableCell colSpan={table.getAllColumns().length} className=\"h-[200px] text-center\">\n <Typography color=\"neutral\">No data available</Typography>\n </TableCell>\n </TableRow>\n </TableBody>\n )\n }\n\n return (\n <TableBody>\n {rows.map((row) => {\n const rowId = getRowId(row.original)\n const isSelected = rowSelection[rowId] ?? false\n return (\n <TableRowComponent key={rowId} row={row} isSelected={isSelected} isSelectionStarted={isSelectionStarted} />\n )\n })}\n </TableBody>\n )\n}\n"],"names":[],"mappings":"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"}
|