@raystack/apsara 0.56.4 → 0.56.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.
- package/dist/components/data-table/components/content.cjs +5 -5
- package/dist/components/data-table/components/content.cjs.map +1 -1
- package/dist/components/data-table/components/content.d.ts.map +1 -1
- package/dist/components/data-table/components/content.js +5 -5
- package/dist/components/data-table/components/content.js.map +1 -1
- package/dist/components/data-table/components/virtualized-content.cjs +5 -5
- package/dist/components/data-table/components/virtualized-content.cjs.map +1 -1
- package/dist/components/data-table/components/virtualized-content.d.ts.map +1 -1
- package/dist/components/data-table/components/virtualized-content.js +5 -5
- package/dist/components/data-table/components/virtualized-content.js.map +1 -1
- package/dist/components/data-table/data-table.cjs +29 -23
- package/dist/components/data-table/data-table.cjs.map +1 -1
- package/dist/components/data-table/data-table.d.ts +7 -7
- package/dist/components/data-table/data-table.d.ts.map +1 -1
- package/dist/components/data-table/data-table.js +30 -24
- package/dist/components/data-table/data-table.js.map +1 -1
- package/dist/components/data-table/utils/index.cjs +29 -2
- package/dist/components/data-table/utils/index.cjs.map +1 -1
- package/dist/components/data-table/utils/index.d.ts +5 -0
- package/dist/components/data-table/utils/index.d.ts.map +1 -1
- package/dist/components/data-table/utils/index.js +29 -3
- package/dist/components/data-table/utils/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -13,6 +13,7 @@ var skeleton = require('../../skeleton/skeleton.cjs');
|
|
|
13
13
|
var table = require('../../table/table.cjs');
|
|
14
14
|
var dataTable_module = require('../data-table.module.css.cjs');
|
|
15
15
|
var useDataTable = require('../hooks/useDataTable.cjs');
|
|
16
|
+
var index = require('../utils/index.cjs');
|
|
16
17
|
|
|
17
18
|
function Headers({ headerGroups = [], className = '' }) {
|
|
18
19
|
return (jsxRuntime.jsx(table.Table.Header, { className: className, children: headerGroups?.map(headerGroup => (jsxRuntime.jsx(table.Table.Row, { children: headerGroup?.headers?.map(header => {
|
|
@@ -47,7 +48,7 @@ function Rows({ rows = [], onRowClick, classNames, lastRowRef }) {
|
|
|
47
48
|
}
|
|
48
49
|
const DefaultEmptyComponent = () => (jsxRuntime.jsx(emptyState.EmptyState, { icon: jsxRuntime.jsx(reactIcons.TableIcon, {}), heading: 'No Data' }));
|
|
49
50
|
function Content({ emptyState, zeroState, classNames = {} }) {
|
|
50
|
-
const { onRowClick, table: table$1, mode, isLoading, loadMoreData, loadingRowCount = 3, tableQuery } = useDataTable.useDataTable();
|
|
51
|
+
const { onRowClick, table: table$1, mode, isLoading, loadMoreData, loadingRowCount = 3, tableQuery, defaultSort } = useDataTable.useDataTable();
|
|
51
52
|
const headerGroups = table$1?.getHeaderGroups();
|
|
52
53
|
const rowModel = table$1?.getRowModel();
|
|
53
54
|
const { rows = [] } = rowModel || {};
|
|
@@ -81,10 +82,9 @@ function Content({ emptyState, zeroState, classNames = {} }) {
|
|
|
81
82
|
}, [mode, rows.length, handleObserver]);
|
|
82
83
|
const visibleColumnsLength = table$1.getVisibleLeafColumns().length;
|
|
83
84
|
const hasData = rows?.length > 0 || isLoading;
|
|
84
|
-
const
|
|
85
|
-
|
|
86
|
-
const
|
|
87
|
-
const isEmptyState = !hasData && hasFiltersOrSearch;
|
|
85
|
+
const hasChanges = index.hasActiveQuery(tableQuery || {}, defaultSort);
|
|
86
|
+
const isZeroState = !hasData && !hasChanges;
|
|
87
|
+
const isEmptyState = !hasData && hasChanges;
|
|
88
88
|
const stateToShow = isZeroState
|
|
89
89
|
? (zeroState ?? emptyState ?? jsxRuntime.jsx(DefaultEmptyComponent, {}))
|
|
90
90
|
: isEmptyState
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content.cjs","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n DataTableColumnDef,\n DataTableContentProps,\n GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction Headers<TData>({\n headerGroups = [],\n className = ''\n}: {\n headerGroups: HeaderGroup<TData>[];\n className?: string;\n}) {\n return (\n <Table.Header className={className}>\n {headerGroups?.map(headerGroup => (\n <Table.Row key={headerGroup?.id}>\n {headerGroup?.headers?.map(header => {\n const columnDef = header.column.columnDef as DataTableColumnDef<\n TData,\n unknown\n >;\n return (\n <Table.Head\n key={header.id}\n colSpan={header.colSpan}\n className={cx(styles.head, columnDef.classNames?.header)}\n style={columnDef.styles?.header}\n >\n {flexRender(columnDef.header, header.getContext())}\n </Table.Head>\n );\n })}\n </Table.Row>\n ))}\n </Table.Header>\n );\n}\n\ninterface RowsProps<TData> {\n rows: Row<TData>[];\n onRowClick?: (row: TData) => void;\n classNames?: {\n row?: string;\n };\n lastRowRef?: React.RefObject<HTMLTableRowElement | null>;\n}\n\nfunction LoaderRows({\n rowCount,\n columnCount\n}: {\n rowCount: number;\n columnCount: number;\n}) {\n const rows = Array.from({ length: rowCount });\n return rows.map((_, rowIndex) => {\n const columns = Array.from({ length: columnCount });\n return (\n <Table.Row key={'loading-row-' + rowIndex}>\n {columns.map((_, colIndex) => (\n <Table.Cell key={'loading-column-' + colIndex}>\n <Skeleton />\n </Table.Cell>\n ))}\n </Table.Row>\n );\n });\n}\n\nfunction GroupHeader<TData>({\n colSpan,\n data\n}: {\n colSpan: number;\n data: GroupedData<TData>;\n}) {\n return (\n <Table.SectionHeader colSpan={colSpan}>\n <Flex gap={3} align='center'>\n {data?.label}\n {data.showGroupCount ? (\n <Badge variant='neutral'>{data?.count}</Badge>\n ) : null}\n </Flex>\n </Table.SectionHeader>\n );\n}\n\nfunction Rows<TData>({\n rows = [],\n onRowClick,\n classNames,\n lastRowRef\n}: RowsProps<TData>) {\n return rows.map((row, idx) => {\n const isSelected = row.getIsSelected();\n const cells = row.getVisibleCells() || [];\n const isGroupHeader = row.subRows && row.subRows.length > 0;\n const isLastRow = idx === rows.length - 1;\n\n if (isGroupHeader) {\n return (\n <GroupHeader\n key={row.id}\n colSpan={cells.length}\n data={row.original as GroupedData<unknown>}\n />\n );\n }\n\n return (\n <Table.Row\n key={row.id}\n className={cx(\n styles['row'],\n onRowClick ? styles['clickable'] : '',\n classNames?.row\n )}\n data-state={isSelected && 'selected'}\n ref={isLastRow ? lastRowRef : undefined}\n onClick={() => onRowClick?.(row.original)}\n >\n {cells.map(cell => {\n const columnDef = cell.column.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <Table.Cell\n key={cell.id}\n className={cx(styles['cell'], columnDef.classNames?.cell)}\n style={columnDef.styles?.cell}\n >\n {flexRender(columnDef.cell, cell.getContext())}\n </Table.Cell>\n );\n })}\n </Table.Row>\n );\n });\n}\n\nconst DefaultEmptyComponent = () => (\n <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n emptyState,\n zeroState,\n classNames = {}\n}: DataTableContentProps) {\n const {\n onRowClick,\n table,\n mode,\n isLoading,\n loadMoreData,\n loadingRowCount = 3,\n tableQuery\n } = useDataTable();\n\n const headerGroups = table?.getHeaderGroups();\n const rowModel = table?.getRowModel();\n const { rows = [] } = rowModel || {};\n\n const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n const observerRef = useRef<IntersectionObserver | null>(null);\n\n const handleObserver = useCallback(\n (entries: IntersectionObserverEntry[]) => {\n const target = entries[0];\n if (target.isIntersecting && !isLoading) {\n loadMoreData();\n }\n },\n [loadMoreData, isLoading]\n );\n\n useEffect(() => {\n if (mode !== 'server') return;\n\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n\n observerRef.current = new IntersectionObserver(handleObserver, {\n threshold: 0.1\n });\n const lastRow = lastRowRef.current;\n if (lastRow) {\n observerRef.current.observe(lastRow);\n }\n\n return () => {\n if (observerRef.current && lastRow) {\n observerRef.current.unobserve(lastRow);\n observerRef.current.disconnect();\n }\n };\n }, [mode, rows.length, handleObserver]);\n\n const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n const hasData = rows?.length > 0 || isLoading;\n\n const
|
|
1
|
+
{"version":3,"file":"content.cjs","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n DataTableColumnDef,\n DataTableContentProps,\n GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { hasActiveQuery } from '../utils';\n\nfunction Headers<TData>({\n headerGroups = [],\n className = ''\n}: {\n headerGroups: HeaderGroup<TData>[];\n className?: string;\n}) {\n return (\n <Table.Header className={className}>\n {headerGroups?.map(headerGroup => (\n <Table.Row key={headerGroup?.id}>\n {headerGroup?.headers?.map(header => {\n const columnDef = header.column.columnDef as DataTableColumnDef<\n TData,\n unknown\n >;\n return (\n <Table.Head\n key={header.id}\n colSpan={header.colSpan}\n className={cx(styles.head, columnDef.classNames?.header)}\n style={columnDef.styles?.header}\n >\n {flexRender(columnDef.header, header.getContext())}\n </Table.Head>\n );\n })}\n </Table.Row>\n ))}\n </Table.Header>\n );\n}\n\ninterface RowsProps<TData> {\n rows: Row<TData>[];\n onRowClick?: (row: TData) => void;\n classNames?: {\n row?: string;\n };\n lastRowRef?: React.RefObject<HTMLTableRowElement | null>;\n}\n\nfunction LoaderRows({\n rowCount,\n columnCount\n}: {\n rowCount: number;\n columnCount: number;\n}) {\n const rows = Array.from({ length: rowCount });\n return rows.map((_, rowIndex) => {\n const columns = Array.from({ length: columnCount });\n return (\n <Table.Row key={'loading-row-' + rowIndex}>\n {columns.map((_, colIndex) => (\n <Table.Cell key={'loading-column-' + colIndex}>\n <Skeleton />\n </Table.Cell>\n ))}\n </Table.Row>\n );\n });\n}\n\nfunction GroupHeader<TData>({\n colSpan,\n data\n}: {\n colSpan: number;\n data: GroupedData<TData>;\n}) {\n return (\n <Table.SectionHeader colSpan={colSpan}>\n <Flex gap={3} align='center'>\n {data?.label}\n {data.showGroupCount ? (\n <Badge variant='neutral'>{data?.count}</Badge>\n ) : null}\n </Flex>\n </Table.SectionHeader>\n );\n}\n\nfunction Rows<TData>({\n rows = [],\n onRowClick,\n classNames,\n lastRowRef\n}: RowsProps<TData>) {\n return rows.map((row, idx) => {\n const isSelected = row.getIsSelected();\n const cells = row.getVisibleCells() || [];\n const isGroupHeader = row.subRows && row.subRows.length > 0;\n const isLastRow = idx === rows.length - 1;\n\n if (isGroupHeader) {\n return (\n <GroupHeader\n key={row.id}\n colSpan={cells.length}\n data={row.original as GroupedData<unknown>}\n />\n );\n }\n\n return (\n <Table.Row\n key={row.id}\n className={cx(\n styles['row'],\n onRowClick ? styles['clickable'] : '',\n classNames?.row\n )}\n data-state={isSelected && 'selected'}\n ref={isLastRow ? lastRowRef : undefined}\n onClick={() => onRowClick?.(row.original)}\n >\n {cells.map(cell => {\n const columnDef = cell.column.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <Table.Cell\n key={cell.id}\n className={cx(styles['cell'], columnDef.classNames?.cell)}\n style={columnDef.styles?.cell}\n >\n {flexRender(columnDef.cell, cell.getContext())}\n </Table.Cell>\n );\n })}\n </Table.Row>\n );\n });\n}\n\nconst DefaultEmptyComponent = () => (\n <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n emptyState,\n zeroState,\n classNames = {}\n}: DataTableContentProps) {\n const {\n onRowClick,\n table,\n mode,\n isLoading,\n loadMoreData,\n loadingRowCount = 3,\n tableQuery,\n defaultSort\n } = useDataTable();\n\n const headerGroups = table?.getHeaderGroups();\n const rowModel = table?.getRowModel();\n const { rows = [] } = rowModel || {};\n\n const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n const observerRef = useRef<IntersectionObserver | null>(null);\n\n const handleObserver = useCallback(\n (entries: IntersectionObserverEntry[]) => {\n const target = entries[0];\n if (target.isIntersecting && !isLoading) {\n loadMoreData();\n }\n },\n [loadMoreData, isLoading]\n );\n\n useEffect(() => {\n if (mode !== 'server') return;\n\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n\n observerRef.current = new IntersectionObserver(handleObserver, {\n threshold: 0.1\n });\n const lastRow = lastRowRef.current;\n if (lastRow) {\n observerRef.current.observe(lastRow);\n }\n\n return () => {\n if (observerRef.current && lastRow) {\n observerRef.current.unobserve(lastRow);\n observerRef.current.disconnect();\n }\n };\n }, [mode, rows.length, handleObserver]);\n\n const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n const hasData = rows?.length > 0 || isLoading;\n\n const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);\n\n const isZeroState = !hasData && !hasChanges;\n const isEmptyState = !hasData && hasChanges;\n\n const stateToShow: React.ReactNode = isZeroState\n ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n : isEmptyState\n ? (emptyState ?? <DefaultEmptyComponent />)\n : null;\n\n return (\n <div className={cx(styles.contentRoot, classNames.root)}>\n <Table className={classNames.table}>\n {hasData && (\n <Headers headerGroups={headerGroups} className={classNames.header} />\n )}\n <Table.Body className={classNames.body}>\n {hasData ? (\n <>\n <Rows\n rows={rows}\n lastRowRef={lastRowRef}\n onRowClick={onRowClick}\n classNames={{\n row: classNames.row\n }}\n />\n {isLoading ? (\n <LoaderRows\n rowCount={loadingRowCount}\n columnCount={visibleColumnsLength}\n />\n ) : null}\n </>\n ) : (\n <Table.Row>\n <Table.Cell\n colSpan={visibleColumnsLength}\n className={styles.emptyStateCell}\n >\n {stateToShow}\n </Table.Cell>\n </Table.Row>\n )}\n </Table.Body>\n </Table>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsBA;AAOE;AAKU;;;AAmBZ;AAWA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;;AAiBA;AAEA;;AAOI;;AAEA;;;;;AAaA;AAaM;;AAaF;AAGN;AACF;AAEA;AAIM;;AAgBJ;AACA;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;;;;AAOA;AACE;;AAGF;AACE;AACD;AACD;;AAEE;;AAGF;AACE;AACE;AACA;;AAEJ;;;;;AASF;AACA;;;AAIE;AACE;;AAGJ;;;AAsCF;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/content.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEL,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/content.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEL,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;AAiJ7B,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,SAAS,EACT,UAAe,EAChB,EAAE,qBAAqB,2CAyGvB"}
|
|
@@ -11,6 +11,7 @@ import { Skeleton } from '../../skeleton/skeleton.js';
|
|
|
11
11
|
import { Table } from '../../table/table.js';
|
|
12
12
|
import styles from '../data-table.module.css.js';
|
|
13
13
|
import { useDataTable } from '../hooks/useDataTable.js';
|
|
14
|
+
import { hasActiveQuery } from '../utils/index.js';
|
|
14
15
|
|
|
15
16
|
function Headers({ headerGroups = [], className = '' }) {
|
|
16
17
|
return (jsx(Table.Header, { className: className, children: headerGroups?.map(headerGroup => (jsx(Table.Row, { children: headerGroup?.headers?.map(header => {
|
|
@@ -45,7 +46,7 @@ function Rows({ rows = [], onRowClick, classNames, lastRowRef }) {
|
|
|
45
46
|
}
|
|
46
47
|
const DefaultEmptyComponent = () => (jsx(EmptyState, { icon: jsx(TableIcon, {}), heading: 'No Data' }));
|
|
47
48
|
function Content({ emptyState, zeroState, classNames = {} }) {
|
|
48
|
-
const { onRowClick, table, mode, isLoading, loadMoreData, loadingRowCount = 3, tableQuery } = useDataTable();
|
|
49
|
+
const { onRowClick, table, mode, isLoading, loadMoreData, loadingRowCount = 3, tableQuery, defaultSort } = useDataTable();
|
|
49
50
|
const headerGroups = table?.getHeaderGroups();
|
|
50
51
|
const rowModel = table?.getRowModel();
|
|
51
52
|
const { rows = [] } = rowModel || {};
|
|
@@ -79,10 +80,9 @@ function Content({ emptyState, zeroState, classNames = {} }) {
|
|
|
79
80
|
}, [mode, rows.length, handleObserver]);
|
|
80
81
|
const visibleColumnsLength = table.getVisibleLeafColumns().length;
|
|
81
82
|
const hasData = rows?.length > 0 || isLoading;
|
|
82
|
-
const
|
|
83
|
-
|
|
84
|
-
const
|
|
85
|
-
const isEmptyState = !hasData && hasFiltersOrSearch;
|
|
83
|
+
const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);
|
|
84
|
+
const isZeroState = !hasData && !hasChanges;
|
|
85
|
+
const isEmptyState = !hasData && hasChanges;
|
|
86
86
|
const stateToShow = isZeroState
|
|
87
87
|
? (zeroState ?? emptyState ?? jsx(DefaultEmptyComponent, {}))
|
|
88
88
|
: isEmptyState
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content.js","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n DataTableColumnDef,\n DataTableContentProps,\n GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction Headers<TData>({\n headerGroups = [],\n className = ''\n}: {\n headerGroups: HeaderGroup<TData>[];\n className?: string;\n}) {\n return (\n <Table.Header className={className}>\n {headerGroups?.map(headerGroup => (\n <Table.Row key={headerGroup?.id}>\n {headerGroup?.headers?.map(header => {\n const columnDef = header.column.columnDef as DataTableColumnDef<\n TData,\n unknown\n >;\n return (\n <Table.Head\n key={header.id}\n colSpan={header.colSpan}\n className={cx(styles.head, columnDef.classNames?.header)}\n style={columnDef.styles?.header}\n >\n {flexRender(columnDef.header, header.getContext())}\n </Table.Head>\n );\n })}\n </Table.Row>\n ))}\n </Table.Header>\n );\n}\n\ninterface RowsProps<TData> {\n rows: Row<TData>[];\n onRowClick?: (row: TData) => void;\n classNames?: {\n row?: string;\n };\n lastRowRef?: React.RefObject<HTMLTableRowElement | null>;\n}\n\nfunction LoaderRows({\n rowCount,\n columnCount\n}: {\n rowCount: number;\n columnCount: number;\n}) {\n const rows = Array.from({ length: rowCount });\n return rows.map((_, rowIndex) => {\n const columns = Array.from({ length: columnCount });\n return (\n <Table.Row key={'loading-row-' + rowIndex}>\n {columns.map((_, colIndex) => (\n <Table.Cell key={'loading-column-' + colIndex}>\n <Skeleton />\n </Table.Cell>\n ))}\n </Table.Row>\n );\n });\n}\n\nfunction GroupHeader<TData>({\n colSpan,\n data\n}: {\n colSpan: number;\n data: GroupedData<TData>;\n}) {\n return (\n <Table.SectionHeader colSpan={colSpan}>\n <Flex gap={3} align='center'>\n {data?.label}\n {data.showGroupCount ? (\n <Badge variant='neutral'>{data?.count}</Badge>\n ) : null}\n </Flex>\n </Table.SectionHeader>\n );\n}\n\nfunction Rows<TData>({\n rows = [],\n onRowClick,\n classNames,\n lastRowRef\n}: RowsProps<TData>) {\n return rows.map((row, idx) => {\n const isSelected = row.getIsSelected();\n const cells = row.getVisibleCells() || [];\n const isGroupHeader = row.subRows && row.subRows.length > 0;\n const isLastRow = idx === rows.length - 1;\n\n if (isGroupHeader) {\n return (\n <GroupHeader\n key={row.id}\n colSpan={cells.length}\n data={row.original as GroupedData<unknown>}\n />\n );\n }\n\n return (\n <Table.Row\n key={row.id}\n className={cx(\n styles['row'],\n onRowClick ? styles['clickable'] : '',\n classNames?.row\n )}\n data-state={isSelected && 'selected'}\n ref={isLastRow ? lastRowRef : undefined}\n onClick={() => onRowClick?.(row.original)}\n >\n {cells.map(cell => {\n const columnDef = cell.column.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <Table.Cell\n key={cell.id}\n className={cx(styles['cell'], columnDef.classNames?.cell)}\n style={columnDef.styles?.cell}\n >\n {flexRender(columnDef.cell, cell.getContext())}\n </Table.Cell>\n );\n })}\n </Table.Row>\n );\n });\n}\n\nconst DefaultEmptyComponent = () => (\n <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n emptyState,\n zeroState,\n classNames = {}\n}: DataTableContentProps) {\n const {\n onRowClick,\n table,\n mode,\n isLoading,\n loadMoreData,\n loadingRowCount = 3,\n tableQuery\n } = useDataTable();\n\n const headerGroups = table?.getHeaderGroups();\n const rowModel = table?.getRowModel();\n const { rows = [] } = rowModel || {};\n\n const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n const observerRef = useRef<IntersectionObserver | null>(null);\n\n const handleObserver = useCallback(\n (entries: IntersectionObserverEntry[]) => {\n const target = entries[0];\n if (target.isIntersecting && !isLoading) {\n loadMoreData();\n }\n },\n [loadMoreData, isLoading]\n );\n\n useEffect(() => {\n if (mode !== 'server') return;\n\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n\n observerRef.current = new IntersectionObserver(handleObserver, {\n threshold: 0.1\n });\n const lastRow = lastRowRef.current;\n if (lastRow) {\n observerRef.current.observe(lastRow);\n }\n\n return () => {\n if (observerRef.current && lastRow) {\n observerRef.current.unobserve(lastRow);\n observerRef.current.disconnect();\n }\n };\n }, [mode, rows.length, handleObserver]);\n\n const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n const hasData = rows?.length > 0 || isLoading;\n\n const
|
|
1
|
+
{"version":3,"file":"content.js","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n DataTableColumnDef,\n DataTableContentProps,\n GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { hasActiveQuery } from '../utils';\n\nfunction Headers<TData>({\n headerGroups = [],\n className = ''\n}: {\n headerGroups: HeaderGroup<TData>[];\n className?: string;\n}) {\n return (\n <Table.Header className={className}>\n {headerGroups?.map(headerGroup => (\n <Table.Row key={headerGroup?.id}>\n {headerGroup?.headers?.map(header => {\n const columnDef = header.column.columnDef as DataTableColumnDef<\n TData,\n unknown\n >;\n return (\n <Table.Head\n key={header.id}\n colSpan={header.colSpan}\n className={cx(styles.head, columnDef.classNames?.header)}\n style={columnDef.styles?.header}\n >\n {flexRender(columnDef.header, header.getContext())}\n </Table.Head>\n );\n })}\n </Table.Row>\n ))}\n </Table.Header>\n );\n}\n\ninterface RowsProps<TData> {\n rows: Row<TData>[];\n onRowClick?: (row: TData) => void;\n classNames?: {\n row?: string;\n };\n lastRowRef?: React.RefObject<HTMLTableRowElement | null>;\n}\n\nfunction LoaderRows({\n rowCount,\n columnCount\n}: {\n rowCount: number;\n columnCount: number;\n}) {\n const rows = Array.from({ length: rowCount });\n return rows.map((_, rowIndex) => {\n const columns = Array.from({ length: columnCount });\n return (\n <Table.Row key={'loading-row-' + rowIndex}>\n {columns.map((_, colIndex) => (\n <Table.Cell key={'loading-column-' + colIndex}>\n <Skeleton />\n </Table.Cell>\n ))}\n </Table.Row>\n );\n });\n}\n\nfunction GroupHeader<TData>({\n colSpan,\n data\n}: {\n colSpan: number;\n data: GroupedData<TData>;\n}) {\n return (\n <Table.SectionHeader colSpan={colSpan}>\n <Flex gap={3} align='center'>\n {data?.label}\n {data.showGroupCount ? (\n <Badge variant='neutral'>{data?.count}</Badge>\n ) : null}\n </Flex>\n </Table.SectionHeader>\n );\n}\n\nfunction Rows<TData>({\n rows = [],\n onRowClick,\n classNames,\n lastRowRef\n}: RowsProps<TData>) {\n return rows.map((row, idx) => {\n const isSelected = row.getIsSelected();\n const cells = row.getVisibleCells() || [];\n const isGroupHeader = row.subRows && row.subRows.length > 0;\n const isLastRow = idx === rows.length - 1;\n\n if (isGroupHeader) {\n return (\n <GroupHeader\n key={row.id}\n colSpan={cells.length}\n data={row.original as GroupedData<unknown>}\n />\n );\n }\n\n return (\n <Table.Row\n key={row.id}\n className={cx(\n styles['row'],\n onRowClick ? styles['clickable'] : '',\n classNames?.row\n )}\n data-state={isSelected && 'selected'}\n ref={isLastRow ? lastRowRef : undefined}\n onClick={() => onRowClick?.(row.original)}\n >\n {cells.map(cell => {\n const columnDef = cell.column.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <Table.Cell\n key={cell.id}\n className={cx(styles['cell'], columnDef.classNames?.cell)}\n style={columnDef.styles?.cell}\n >\n {flexRender(columnDef.cell, cell.getContext())}\n </Table.Cell>\n );\n })}\n </Table.Row>\n );\n });\n}\n\nconst DefaultEmptyComponent = () => (\n <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n emptyState,\n zeroState,\n classNames = {}\n}: DataTableContentProps) {\n const {\n onRowClick,\n table,\n mode,\n isLoading,\n loadMoreData,\n loadingRowCount = 3,\n tableQuery,\n defaultSort\n } = useDataTable();\n\n const headerGroups = table?.getHeaderGroups();\n const rowModel = table?.getRowModel();\n const { rows = [] } = rowModel || {};\n\n const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n const observerRef = useRef<IntersectionObserver | null>(null);\n\n const handleObserver = useCallback(\n (entries: IntersectionObserverEntry[]) => {\n const target = entries[0];\n if (target.isIntersecting && !isLoading) {\n loadMoreData();\n }\n },\n [loadMoreData, isLoading]\n );\n\n useEffect(() => {\n if (mode !== 'server') return;\n\n if (observerRef.current) {\n observerRef.current.disconnect();\n }\n\n observerRef.current = new IntersectionObserver(handleObserver, {\n threshold: 0.1\n });\n const lastRow = lastRowRef.current;\n if (lastRow) {\n observerRef.current.observe(lastRow);\n }\n\n return () => {\n if (observerRef.current && lastRow) {\n observerRef.current.unobserve(lastRow);\n observerRef.current.disconnect();\n }\n };\n }, [mode, rows.length, handleObserver]);\n\n const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n const hasData = rows?.length > 0 || isLoading;\n\n const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);\n\n const isZeroState = !hasData && !hasChanges;\n const isEmptyState = !hasData && hasChanges;\n\n const stateToShow: React.ReactNode = isZeroState\n ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n : isEmptyState\n ? (emptyState ?? <DefaultEmptyComponent />)\n : null;\n\n return (\n <div className={cx(styles.contentRoot, classNames.root)}>\n <Table className={classNames.table}>\n {hasData && (\n <Headers headerGroups={headerGroups} className={classNames.header} />\n )}\n <Table.Body className={classNames.body}>\n {hasData ? (\n <>\n <Rows\n rows={rows}\n lastRowRef={lastRowRef}\n onRowClick={onRowClick}\n classNames={{\n row: classNames.row\n }}\n />\n {isLoading ? (\n <LoaderRows\n rowCount={loadingRowCount}\n columnCount={visibleColumnsLength}\n />\n ) : null}\n </>\n ) : (\n <Table.Row>\n <Table.Cell\n colSpan={visibleColumnsLength}\n className={styles.emptyStateCell}\n >\n {stateToShow}\n </Table.Cell>\n </Table.Row>\n )}\n </Table.Body>\n </Table>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAsBA;AAOE;AAKU;;;AAmBZ;AAWA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;;AAiBA;AAEA;;AAOI;;AAEA;;;;;AAaA;AAaM;;AAaF;AAGN;AACF;AAEA;AAIM;;AAgBJ;AACA;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;;;;AAOA;AACE;;AAGF;AACE;AACD;AACD;;AAEE;;AAGF;AACE;AACE;AACA;;AAEJ;;;;;AASF;AACA;;;AAIE;AACE;;AAGJ;;;AAsCF;;"}
|
|
@@ -14,6 +14,7 @@ var flex = require('../../flex/flex.cjs');
|
|
|
14
14
|
var skeleton = require('../../skeleton/skeleton.cjs');
|
|
15
15
|
var dataTable_module = require('../data-table.module.css.cjs');
|
|
16
16
|
var useDataTable = require('../hooks/useDataTable.cjs');
|
|
17
|
+
var index = require('../utils/index.cjs');
|
|
17
18
|
|
|
18
19
|
function VirtualHeaders({ headerGroups = [], className = '' }) {
|
|
19
20
|
return (jsxRuntime.jsx("div", { role: 'rowgroup', className: classVarianceAuthority.cx(dataTable_module.default.virtualHeaderGroup, className), children: headerGroups?.map(headerGroup => (jsxRuntime.jsx("div", { role: 'row', className: dataTable_module.default.virtualHeaderRow, children: headerGroup?.headers?.map(header => {
|
|
@@ -55,7 +56,7 @@ function VirtualLoaderRows({ columns, rowHeight, count }) {
|
|
|
55
56
|
}
|
|
56
57
|
const DefaultEmptyComponent = () => (jsxRuntime.jsx(emptyState.EmptyState, { icon: jsxRuntime.jsx(reactIcons.TableIcon, {}), heading: 'No Data' }));
|
|
57
58
|
function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, loadMoreOffset = 100, emptyState, zeroState, classNames = {} }) {
|
|
58
|
-
const { onRowClick, table, isLoading, loadMoreData, tableQuery, loadingRowCount = 3 } = useDataTable.useDataTable();
|
|
59
|
+
const { onRowClick, table, isLoading, loadMoreData, tableQuery, defaultSort, loadingRowCount = 3 } = useDataTable.useDataTable();
|
|
59
60
|
const headerGroups = table?.getHeaderGroups();
|
|
60
61
|
const rowModel = table?.getRowModel();
|
|
61
62
|
const { rows = [] } = rowModel || {};
|
|
@@ -81,10 +82,9 @@ function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, l
|
|
|
81
82
|
}, [isLoading, loadMoreData, loadMoreOffset]);
|
|
82
83
|
const totalHeight = virtualizer.getTotalSize();
|
|
83
84
|
const hasData = rows?.length > 0 || isLoading;
|
|
84
|
-
const
|
|
85
|
-
|
|
86
|
-
const
|
|
87
|
-
const isEmptyState = !hasData && hasFiltersOrSearch;
|
|
85
|
+
const hasChanges = index.hasActiveQuery(tableQuery || {}, defaultSort);
|
|
86
|
+
const isZeroState = !hasData && !hasChanges;
|
|
87
|
+
const isEmptyState = !hasData && hasChanges;
|
|
88
88
|
const stateToShow = isZeroState
|
|
89
89
|
? (zeroState ?? emptyState ?? jsxRuntime.jsx(DefaultEmptyComponent, {}))
|
|
90
90
|
: isEmptyState
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtualized-content.cjs","sources":["../../../../components/data-table/components/virtualized-content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useRef } from 'react';\nimport tableStyles from '~/components/table/table.module.css';\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport styles from '../data-table.module.css';\nimport {\n DataTableColumnDef,\n GroupedData,\n VirtualizedContentProps\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction VirtualHeaders<TData>({\n headerGroups = [],\n className = ''\n}: {\n headerGroups: HeaderGroup<TData>[];\n className?: string;\n}) {\n return (\n <div role='rowgroup' className={cx(styles.virtualHeaderGroup, className)}>\n {headerGroups?.map(headerGroup => (\n <div\n role='row'\n key={headerGroup?.id}\n className={styles.virtualHeaderRow}\n >\n {headerGroup?.headers?.map(header => {\n const columnDef = header.column.columnDef as DataTableColumnDef<\n TData,\n unknown\n >;\n return (\n <div\n role='columnheader'\n key={header.id}\n className={cx(\n tableStyles.head,\n styles.virtualHead,\n columnDef.classNames?.header\n )}\n style={columnDef.styles?.header}\n >\n {flexRender(columnDef.header, header.getContext())}\n </div>\n );\n })}\n </div>\n ))}\n </div>\n );\n}\n\nfunction VirtualGroupHeader<TData>({\n data,\n style\n}: {\n data: GroupedData<TData>;\n style?: React.CSSProperties;\n}) {\n return (\n <div role='row' className={styles.virtualSectionHeader} style={style}>\n <Flex gap={3} align='center'>\n {data?.label}\n {data.showGroupCount ? (\n <Badge variant='neutral'>{data?.count}</Badge>\n ) : null}\n </Flex>\n </div>\n );\n}\n\nfunction VirtualRows<TData>({\n rows,\n virtualizer,\n onRowClick,\n classNames\n}: {\n rows: Row<TData>[];\n virtualizer: ReturnType<typeof useVirtualizer>;\n onRowClick?: (row: TData) => void;\n classNames?: { row?: string };\n}) {\n const items = virtualizer.getVirtualItems();\n\n return items.map((item, idx) => {\n const row = rows[item.index];\n if (!row) return null;\n\n const isSelected = row.getIsSelected();\n const cells = row.getVisibleCells() || [];\n const isGroupHeader = row.subRows && row.subRows.length > 0;\n const rowKey = row.id + '-' + item.index;\n\n const positionStyle: React.CSSProperties = {\n height: item.size,\n top: item.start\n };\n\n if (isGroupHeader) {\n return (\n <VirtualGroupHeader\n key={rowKey}\n data={row.original as GroupedData<unknown>}\n style={positionStyle}\n />\n );\n }\n\n return (\n <div\n role='row'\n key={rowKey}\n className={cx(\n styles.virtualRow,\n styles['row'],\n onRowClick ? styles['clickable'] : '',\n classNames?.row\n )}\n style={positionStyle}\n data-state={isSelected && 'selected'}\n onClick={() => onRowClick?.(row.original)}\n >\n {cells.map(cell => {\n const columnDef = cell.column.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <div\n role='cell'\n key={cell.id}\n className={cx(\n tableStyles.cell,\n styles.virtualCell,\n columnDef.classNames?.cell\n )}\n style={columnDef.styles?.cell}\n >\n {flexRender(columnDef.cell, cell.getContext())}\n </div>\n );\n })}\n </div>\n );\n });\n}\n\nfunction VirtualLoaderRows({\n columns,\n rowHeight,\n count\n}: {\n columns: ReturnType<\n ReturnType<typeof useDataTable>['table']['getVisibleLeafColumns']\n >;\n rowHeight: number;\n count: number;\n}) {\n return (\n <div className={styles.stickyLoaderContainer}>\n {Array.from({ length: count }).map((_, rowIndex) => (\n <div\n role='row'\n key={'loading-row-' + rowIndex}\n className={cx(styles.virtualRow, styles['row'], styles.loaderRow)}\n style={{ height: rowHeight }}\n >\n {columns.map((col, colIndex) => {\n const columnDef = col.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <div\n role='cell'\n key={'loading-column-' + colIndex}\n className={cx(\n tableStyles.cell,\n styles.virtualCell,\n columnDef.classNames?.cell\n )}\n style={columnDef.styles?.cell}\n >\n <Skeleton containerClassName={styles['flex-1']} />\n </div>\n );\n })}\n </div>\n ))}\n </div>\n );\n}\n\nconst DefaultEmptyComponent = () => (\n <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function VirtualizedContent({\n rowHeight = 40,\n groupHeaderHeight,\n overscan = 5,\n loadMoreOffset = 100,\n emptyState,\n zeroState,\n classNames = {}\n}: VirtualizedContentProps) {\n const {\n onRowClick,\n table,\n isLoading,\n loadMoreData,\n tableQuery,\n loadingRowCount = 3\n } = useDataTable();\n\n const headerGroups = table?.getHeaderGroups();\n const rowModel = table?.getRowModel();\n const { rows = [] } = rowModel || {};\n\n const scrollContainerRef = useRef<HTMLDivElement | null>(null);\n\n const showLoaderRows = isLoading && rows.length > 0;\n\n const virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollContainerRef.current,\n estimateSize: index => {\n const row = rows[index];\n const isGroupHeader = row?.subRows && row.subRows.length > 0;\n return isGroupHeader ? (groupHeaderHeight ?? rowHeight) : rowHeight;\n },\n overscan\n });\n\n const handleVirtualScroll = useCallback(() => {\n if (!scrollContainerRef.current || isLoading) return;\n const { scrollTop, scrollHeight, clientHeight } =\n scrollContainerRef.current;\n if (scrollHeight - scrollTop - clientHeight < loadMoreOffset) {\n loadMoreData();\n }\n }, [isLoading, loadMoreData, loadMoreOffset]);\n\n const totalHeight = virtualizer.getTotalSize();\n\n const hasData = rows?.length > 0 || isLoading;\n\n const
|
|
1
|
+
{"version":3,"file":"virtualized-content.cjs","sources":["../../../../components/data-table/components/virtualized-content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useRef } from 'react';\nimport tableStyles from '~/components/table/table.module.css';\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport styles from '../data-table.module.css';\nimport {\n DataTableColumnDef,\n GroupedData,\n VirtualizedContentProps\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { hasActiveQuery } from '../utils';\n\nfunction VirtualHeaders<TData>({\n headerGroups = [],\n className = ''\n}: {\n headerGroups: HeaderGroup<TData>[];\n className?: string;\n}) {\n return (\n <div role='rowgroup' className={cx(styles.virtualHeaderGroup, className)}>\n {headerGroups?.map(headerGroup => (\n <div\n role='row'\n key={headerGroup?.id}\n className={styles.virtualHeaderRow}\n >\n {headerGroup?.headers?.map(header => {\n const columnDef = header.column.columnDef as DataTableColumnDef<\n TData,\n unknown\n >;\n return (\n <div\n role='columnheader'\n key={header.id}\n className={cx(\n tableStyles.head,\n styles.virtualHead,\n columnDef.classNames?.header\n )}\n style={columnDef.styles?.header}\n >\n {flexRender(columnDef.header, header.getContext())}\n </div>\n );\n })}\n </div>\n ))}\n </div>\n );\n}\n\nfunction VirtualGroupHeader<TData>({\n data,\n style\n}: {\n data: GroupedData<TData>;\n style?: React.CSSProperties;\n}) {\n return (\n <div role='row' className={styles.virtualSectionHeader} style={style}>\n <Flex gap={3} align='center'>\n {data?.label}\n {data.showGroupCount ? (\n <Badge variant='neutral'>{data?.count}</Badge>\n ) : null}\n </Flex>\n </div>\n );\n}\n\nfunction VirtualRows<TData>({\n rows,\n virtualizer,\n onRowClick,\n classNames\n}: {\n rows: Row<TData>[];\n virtualizer: ReturnType<typeof useVirtualizer>;\n onRowClick?: (row: TData) => void;\n classNames?: { row?: string };\n}) {\n const items = virtualizer.getVirtualItems();\n\n return items.map((item, idx) => {\n const row = rows[item.index];\n if (!row) return null;\n\n const isSelected = row.getIsSelected();\n const cells = row.getVisibleCells() || [];\n const isGroupHeader = row.subRows && row.subRows.length > 0;\n const rowKey = row.id + '-' + item.index;\n\n const positionStyle: React.CSSProperties = {\n height: item.size,\n top: item.start\n };\n\n if (isGroupHeader) {\n return (\n <VirtualGroupHeader\n key={rowKey}\n data={row.original as GroupedData<unknown>}\n style={positionStyle}\n />\n );\n }\n\n return (\n <div\n role='row'\n key={rowKey}\n className={cx(\n styles.virtualRow,\n styles['row'],\n onRowClick ? styles['clickable'] : '',\n classNames?.row\n )}\n style={positionStyle}\n data-state={isSelected && 'selected'}\n onClick={() => onRowClick?.(row.original)}\n >\n {cells.map(cell => {\n const columnDef = cell.column.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <div\n role='cell'\n key={cell.id}\n className={cx(\n tableStyles.cell,\n styles.virtualCell,\n columnDef.classNames?.cell\n )}\n style={columnDef.styles?.cell}\n >\n {flexRender(columnDef.cell, cell.getContext())}\n </div>\n );\n })}\n </div>\n );\n });\n}\n\nfunction VirtualLoaderRows({\n columns,\n rowHeight,\n count\n}: {\n columns: ReturnType<\n ReturnType<typeof useDataTable>['table']['getVisibleLeafColumns']\n >;\n rowHeight: number;\n count: number;\n}) {\n return (\n <div className={styles.stickyLoaderContainer}>\n {Array.from({ length: count }).map((_, rowIndex) => (\n <div\n role='row'\n key={'loading-row-' + rowIndex}\n className={cx(styles.virtualRow, styles['row'], styles.loaderRow)}\n style={{ height: rowHeight }}\n >\n {columns.map((col, colIndex) => {\n const columnDef = col.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <div\n role='cell'\n key={'loading-column-' + colIndex}\n className={cx(\n tableStyles.cell,\n styles.virtualCell,\n columnDef.classNames?.cell\n )}\n style={columnDef.styles?.cell}\n >\n <Skeleton containerClassName={styles['flex-1']} />\n </div>\n );\n })}\n </div>\n ))}\n </div>\n );\n}\n\nconst DefaultEmptyComponent = () => (\n <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function VirtualizedContent({\n rowHeight = 40,\n groupHeaderHeight,\n overscan = 5,\n loadMoreOffset = 100,\n emptyState,\n zeroState,\n classNames = {}\n}: VirtualizedContentProps) {\n const {\n onRowClick,\n table,\n isLoading,\n loadMoreData,\n tableQuery,\n defaultSort,\n loadingRowCount = 3\n } = useDataTable();\n\n const headerGroups = table?.getHeaderGroups();\n const rowModel = table?.getRowModel();\n const { rows = [] } = rowModel || {};\n\n const scrollContainerRef = useRef<HTMLDivElement | null>(null);\n\n const showLoaderRows = isLoading && rows.length > 0;\n\n const virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollContainerRef.current,\n estimateSize: index => {\n const row = rows[index];\n const isGroupHeader = row?.subRows && row.subRows.length > 0;\n return isGroupHeader ? (groupHeaderHeight ?? rowHeight) : rowHeight;\n },\n overscan\n });\n\n const handleVirtualScroll = useCallback(() => {\n if (!scrollContainerRef.current || isLoading) return;\n const { scrollTop, scrollHeight, clientHeight } =\n scrollContainerRef.current;\n if (scrollHeight - scrollTop - clientHeight < loadMoreOffset) {\n loadMoreData();\n }\n }, [isLoading, loadMoreData, loadMoreOffset]);\n\n const totalHeight = virtualizer.getTotalSize();\n\n const hasData = rows?.length > 0 || isLoading;\n\n const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);\n\n const isZeroState = !hasData && !hasChanges;\n const isEmptyState = !hasData && hasChanges;\n\n const stateToShow: React.ReactNode = isZeroState\n ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n : isEmptyState\n ? (emptyState ?? <DefaultEmptyComponent />)\n : null;\n\n if (!hasData) {\n return <div className={classNames.root}>{stateToShow}</div>;\n }\n\n const visibleColumns = table.getVisibleLeafColumns();\n\n return (\n <div\n ref={scrollContainerRef}\n className={cx(classNames.root, styles.scrollContainer)}\n onScroll={handleVirtualScroll}\n >\n <div role='table' className={cx(styles.virtualTable, classNames.table)}>\n <VirtualHeaders\n headerGroups={headerGroups}\n className={cx(styles.stickyHeader, classNames.header)}\n />\n <div\n role='rowgroup'\n className={cx(styles.virtualBodyGroup, classNames.body)}\n style={{ height: totalHeight }}\n >\n <VirtualRows\n rows={rows}\n virtualizer={virtualizer}\n onRowClick={onRowClick}\n classNames={{\n row: classNames.row\n }}\n />\n </div>\n </div>\n {showLoaderRows && (\n <VirtualLoaderRows\n columns={visibleColumns}\n rowHeight={rowHeight}\n count={loadingRowCount}\n />\n )}\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAsBA;;AAgBY;;;AAuBZ;AAEA;;AAiBA;AAEA;AAWE;;;AAIE;AAAU;AAEV;;AAEA;;AAGA;;;;;AAME;;AASF;AAeM;;AAkBF;AAGN;AACF;AAEA;AAWE;AAUU;;;AAuBZ;AAEA;AAIM;;AAmBJ;AACA;;AAGA;;;;AAME;;AAEE;AACA;AACA;;;AAGH;AAED;AACE;;;;AAIE;;;AAIJ;;;AAMA;AACA;;;AAIE;AACE;;;;;AAOJ;;;;AAqCF;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtualized-content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/virtualized-content.tsx"],"names":[],"mappings":"AAcA,OAAO,EAGL,uBAAuB,EACxB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"virtualized-content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/virtualized-content.tsx"],"names":[],"mappings":"AAcA,OAAO,EAGL,uBAAuB,EACxB,MAAM,qBAAqB,CAAC;AA8L7B,wBAAgB,kBAAkB,CAAC,EACjC,SAAc,EACd,iBAAiB,EACjB,QAAY,EACZ,cAAoB,EACpB,UAAU,EACV,SAAS,EACT,UAAe,EAChB,EAAE,uBAAuB,2CA+FzB"}
|
|
@@ -12,6 +12,7 @@ import { Flex } from '../../flex/flex.js';
|
|
|
12
12
|
import { Skeleton } from '../../skeleton/skeleton.js';
|
|
13
13
|
import styles from '../data-table.module.css.js';
|
|
14
14
|
import { useDataTable } from '../hooks/useDataTable.js';
|
|
15
|
+
import { hasActiveQuery } from '../utils/index.js';
|
|
15
16
|
|
|
16
17
|
function VirtualHeaders({ headerGroups = [], className = '' }) {
|
|
17
18
|
return (jsx("div", { role: 'rowgroup', className: cx(styles.virtualHeaderGroup, className), children: headerGroups?.map(headerGroup => (jsx("div", { role: 'row', className: styles.virtualHeaderRow, children: headerGroup?.headers?.map(header => {
|
|
@@ -53,7 +54,7 @@ function VirtualLoaderRows({ columns, rowHeight, count }) {
|
|
|
53
54
|
}
|
|
54
55
|
const DefaultEmptyComponent = () => (jsx(EmptyState, { icon: jsx(TableIcon, {}), heading: 'No Data' }));
|
|
55
56
|
function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, loadMoreOffset = 100, emptyState, zeroState, classNames = {} }) {
|
|
56
|
-
const { onRowClick, table, isLoading, loadMoreData, tableQuery, loadingRowCount = 3 } = useDataTable();
|
|
57
|
+
const { onRowClick, table, isLoading, loadMoreData, tableQuery, defaultSort, loadingRowCount = 3 } = useDataTable();
|
|
57
58
|
const headerGroups = table?.getHeaderGroups();
|
|
58
59
|
const rowModel = table?.getRowModel();
|
|
59
60
|
const { rows = [] } = rowModel || {};
|
|
@@ -79,10 +80,9 @@ function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, l
|
|
|
79
80
|
}, [isLoading, loadMoreData, loadMoreOffset]);
|
|
80
81
|
const totalHeight = virtualizer.getTotalSize();
|
|
81
82
|
const hasData = rows?.length > 0 || isLoading;
|
|
82
|
-
const
|
|
83
|
-
|
|
84
|
-
const
|
|
85
|
-
const isEmptyState = !hasData && hasFiltersOrSearch;
|
|
83
|
+
const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);
|
|
84
|
+
const isZeroState = !hasData && !hasChanges;
|
|
85
|
+
const isEmptyState = !hasData && hasChanges;
|
|
86
86
|
const stateToShow = isZeroState
|
|
87
87
|
? (zeroState ?? emptyState ?? jsx(DefaultEmptyComponent, {}))
|
|
88
88
|
: isEmptyState
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtualized-content.js","sources":["../../../../components/data-table/components/virtualized-content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useRef } from 'react';\nimport tableStyles from '~/components/table/table.module.css';\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport styles from '../data-table.module.css';\nimport {\n DataTableColumnDef,\n GroupedData,\n VirtualizedContentProps\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction VirtualHeaders<TData>({\n headerGroups = [],\n className = ''\n}: {\n headerGroups: HeaderGroup<TData>[];\n className?: string;\n}) {\n return (\n <div role='rowgroup' className={cx(styles.virtualHeaderGroup, className)}>\n {headerGroups?.map(headerGroup => (\n <div\n role='row'\n key={headerGroup?.id}\n className={styles.virtualHeaderRow}\n >\n {headerGroup?.headers?.map(header => {\n const columnDef = header.column.columnDef as DataTableColumnDef<\n TData,\n unknown\n >;\n return (\n <div\n role='columnheader'\n key={header.id}\n className={cx(\n tableStyles.head,\n styles.virtualHead,\n columnDef.classNames?.header\n )}\n style={columnDef.styles?.header}\n >\n {flexRender(columnDef.header, header.getContext())}\n </div>\n );\n })}\n </div>\n ))}\n </div>\n );\n}\n\nfunction VirtualGroupHeader<TData>({\n data,\n style\n}: {\n data: GroupedData<TData>;\n style?: React.CSSProperties;\n}) {\n return (\n <div role='row' className={styles.virtualSectionHeader} style={style}>\n <Flex gap={3} align='center'>\n {data?.label}\n {data.showGroupCount ? (\n <Badge variant='neutral'>{data?.count}</Badge>\n ) : null}\n </Flex>\n </div>\n );\n}\n\nfunction VirtualRows<TData>({\n rows,\n virtualizer,\n onRowClick,\n classNames\n}: {\n rows: Row<TData>[];\n virtualizer: ReturnType<typeof useVirtualizer>;\n onRowClick?: (row: TData) => void;\n classNames?: { row?: string };\n}) {\n const items = virtualizer.getVirtualItems();\n\n return items.map((item, idx) => {\n const row = rows[item.index];\n if (!row) return null;\n\n const isSelected = row.getIsSelected();\n const cells = row.getVisibleCells() || [];\n const isGroupHeader = row.subRows && row.subRows.length > 0;\n const rowKey = row.id + '-' + item.index;\n\n const positionStyle: React.CSSProperties = {\n height: item.size,\n top: item.start\n };\n\n if (isGroupHeader) {\n return (\n <VirtualGroupHeader\n key={rowKey}\n data={row.original as GroupedData<unknown>}\n style={positionStyle}\n />\n );\n }\n\n return (\n <div\n role='row'\n key={rowKey}\n className={cx(\n styles.virtualRow,\n styles['row'],\n onRowClick ? styles['clickable'] : '',\n classNames?.row\n )}\n style={positionStyle}\n data-state={isSelected && 'selected'}\n onClick={() => onRowClick?.(row.original)}\n >\n {cells.map(cell => {\n const columnDef = cell.column.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <div\n role='cell'\n key={cell.id}\n className={cx(\n tableStyles.cell,\n styles.virtualCell,\n columnDef.classNames?.cell\n )}\n style={columnDef.styles?.cell}\n >\n {flexRender(columnDef.cell, cell.getContext())}\n </div>\n );\n })}\n </div>\n );\n });\n}\n\nfunction VirtualLoaderRows({\n columns,\n rowHeight,\n count\n}: {\n columns: ReturnType<\n ReturnType<typeof useDataTable>['table']['getVisibleLeafColumns']\n >;\n rowHeight: number;\n count: number;\n}) {\n return (\n <div className={styles.stickyLoaderContainer}>\n {Array.from({ length: count }).map((_, rowIndex) => (\n <div\n role='row'\n key={'loading-row-' + rowIndex}\n className={cx(styles.virtualRow, styles['row'], styles.loaderRow)}\n style={{ height: rowHeight }}\n >\n {columns.map((col, colIndex) => {\n const columnDef = col.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <div\n role='cell'\n key={'loading-column-' + colIndex}\n className={cx(\n tableStyles.cell,\n styles.virtualCell,\n columnDef.classNames?.cell\n )}\n style={columnDef.styles?.cell}\n >\n <Skeleton containerClassName={styles['flex-1']} />\n </div>\n );\n })}\n </div>\n ))}\n </div>\n );\n}\n\nconst DefaultEmptyComponent = () => (\n <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function VirtualizedContent({\n rowHeight = 40,\n groupHeaderHeight,\n overscan = 5,\n loadMoreOffset = 100,\n emptyState,\n zeroState,\n classNames = {}\n}: VirtualizedContentProps) {\n const {\n onRowClick,\n table,\n isLoading,\n loadMoreData,\n tableQuery,\n loadingRowCount = 3\n } = useDataTable();\n\n const headerGroups = table?.getHeaderGroups();\n const rowModel = table?.getRowModel();\n const { rows = [] } = rowModel || {};\n\n const scrollContainerRef = useRef<HTMLDivElement | null>(null);\n\n const showLoaderRows = isLoading && rows.length > 0;\n\n const virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollContainerRef.current,\n estimateSize: index => {\n const row = rows[index];\n const isGroupHeader = row?.subRows && row.subRows.length > 0;\n return isGroupHeader ? (groupHeaderHeight ?? rowHeight) : rowHeight;\n },\n overscan\n });\n\n const handleVirtualScroll = useCallback(() => {\n if (!scrollContainerRef.current || isLoading) return;\n const { scrollTop, scrollHeight, clientHeight } =\n scrollContainerRef.current;\n if (scrollHeight - scrollTop - clientHeight < loadMoreOffset) {\n loadMoreData();\n }\n }, [isLoading, loadMoreData, loadMoreOffset]);\n\n const totalHeight = virtualizer.getTotalSize();\n\n const hasData = rows?.length > 0 || isLoading;\n\n const
|
|
1
|
+
{"version":3,"file":"virtualized-content.js","sources":["../../../../components/data-table/components/virtualized-content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useRef } from 'react';\nimport tableStyles from '~/components/table/table.module.css';\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport styles from '../data-table.module.css';\nimport {\n DataTableColumnDef,\n GroupedData,\n VirtualizedContentProps\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { hasActiveQuery } from '../utils';\n\nfunction VirtualHeaders<TData>({\n headerGroups = [],\n className = ''\n}: {\n headerGroups: HeaderGroup<TData>[];\n className?: string;\n}) {\n return (\n <div role='rowgroup' className={cx(styles.virtualHeaderGroup, className)}>\n {headerGroups?.map(headerGroup => (\n <div\n role='row'\n key={headerGroup?.id}\n className={styles.virtualHeaderRow}\n >\n {headerGroup?.headers?.map(header => {\n const columnDef = header.column.columnDef as DataTableColumnDef<\n TData,\n unknown\n >;\n return (\n <div\n role='columnheader'\n key={header.id}\n className={cx(\n tableStyles.head,\n styles.virtualHead,\n columnDef.classNames?.header\n )}\n style={columnDef.styles?.header}\n >\n {flexRender(columnDef.header, header.getContext())}\n </div>\n );\n })}\n </div>\n ))}\n </div>\n );\n}\n\nfunction VirtualGroupHeader<TData>({\n data,\n style\n}: {\n data: GroupedData<TData>;\n style?: React.CSSProperties;\n}) {\n return (\n <div role='row' className={styles.virtualSectionHeader} style={style}>\n <Flex gap={3} align='center'>\n {data?.label}\n {data.showGroupCount ? (\n <Badge variant='neutral'>{data?.count}</Badge>\n ) : null}\n </Flex>\n </div>\n );\n}\n\nfunction VirtualRows<TData>({\n rows,\n virtualizer,\n onRowClick,\n classNames\n}: {\n rows: Row<TData>[];\n virtualizer: ReturnType<typeof useVirtualizer>;\n onRowClick?: (row: TData) => void;\n classNames?: { row?: string };\n}) {\n const items = virtualizer.getVirtualItems();\n\n return items.map((item, idx) => {\n const row = rows[item.index];\n if (!row) return null;\n\n const isSelected = row.getIsSelected();\n const cells = row.getVisibleCells() || [];\n const isGroupHeader = row.subRows && row.subRows.length > 0;\n const rowKey = row.id + '-' + item.index;\n\n const positionStyle: React.CSSProperties = {\n height: item.size,\n top: item.start\n };\n\n if (isGroupHeader) {\n return (\n <VirtualGroupHeader\n key={rowKey}\n data={row.original as GroupedData<unknown>}\n style={positionStyle}\n />\n );\n }\n\n return (\n <div\n role='row'\n key={rowKey}\n className={cx(\n styles.virtualRow,\n styles['row'],\n onRowClick ? styles['clickable'] : '',\n classNames?.row\n )}\n style={positionStyle}\n data-state={isSelected && 'selected'}\n onClick={() => onRowClick?.(row.original)}\n >\n {cells.map(cell => {\n const columnDef = cell.column.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <div\n role='cell'\n key={cell.id}\n className={cx(\n tableStyles.cell,\n styles.virtualCell,\n columnDef.classNames?.cell\n )}\n style={columnDef.styles?.cell}\n >\n {flexRender(columnDef.cell, cell.getContext())}\n </div>\n );\n })}\n </div>\n );\n });\n}\n\nfunction VirtualLoaderRows({\n columns,\n rowHeight,\n count\n}: {\n columns: ReturnType<\n ReturnType<typeof useDataTable>['table']['getVisibleLeafColumns']\n >;\n rowHeight: number;\n count: number;\n}) {\n return (\n <div className={styles.stickyLoaderContainer}>\n {Array.from({ length: count }).map((_, rowIndex) => (\n <div\n role='row'\n key={'loading-row-' + rowIndex}\n className={cx(styles.virtualRow, styles['row'], styles.loaderRow)}\n style={{ height: rowHeight }}\n >\n {columns.map((col, colIndex) => {\n const columnDef = col.columnDef as DataTableColumnDef<\n unknown,\n unknown\n >;\n return (\n <div\n role='cell'\n key={'loading-column-' + colIndex}\n className={cx(\n tableStyles.cell,\n styles.virtualCell,\n columnDef.classNames?.cell\n )}\n style={columnDef.styles?.cell}\n >\n <Skeleton containerClassName={styles['flex-1']} />\n </div>\n );\n })}\n </div>\n ))}\n </div>\n );\n}\n\nconst DefaultEmptyComponent = () => (\n <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function VirtualizedContent({\n rowHeight = 40,\n groupHeaderHeight,\n overscan = 5,\n loadMoreOffset = 100,\n emptyState,\n zeroState,\n classNames = {}\n}: VirtualizedContentProps) {\n const {\n onRowClick,\n table,\n isLoading,\n loadMoreData,\n tableQuery,\n defaultSort,\n loadingRowCount = 3\n } = useDataTable();\n\n const headerGroups = table?.getHeaderGroups();\n const rowModel = table?.getRowModel();\n const { rows = [] } = rowModel || {};\n\n const scrollContainerRef = useRef<HTMLDivElement | null>(null);\n\n const showLoaderRows = isLoading && rows.length > 0;\n\n const virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollContainerRef.current,\n estimateSize: index => {\n const row = rows[index];\n const isGroupHeader = row?.subRows && row.subRows.length > 0;\n return isGroupHeader ? (groupHeaderHeight ?? rowHeight) : rowHeight;\n },\n overscan\n });\n\n const handleVirtualScroll = useCallback(() => {\n if (!scrollContainerRef.current || isLoading) return;\n const { scrollTop, scrollHeight, clientHeight } =\n scrollContainerRef.current;\n if (scrollHeight - scrollTop - clientHeight < loadMoreOffset) {\n loadMoreData();\n }\n }, [isLoading, loadMoreData, loadMoreOffset]);\n\n const totalHeight = virtualizer.getTotalSize();\n\n const hasData = rows?.length > 0 || isLoading;\n\n const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);\n\n const isZeroState = !hasData && !hasChanges;\n const isEmptyState = !hasData && hasChanges;\n\n const stateToShow: React.ReactNode = isZeroState\n ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n : isEmptyState\n ? (emptyState ?? <DefaultEmptyComponent />)\n : null;\n\n if (!hasData) {\n return <div className={classNames.root}>{stateToShow}</div>;\n }\n\n const visibleColumns = table.getVisibleLeafColumns();\n\n return (\n <div\n ref={scrollContainerRef}\n className={cx(classNames.root, styles.scrollContainer)}\n onScroll={handleVirtualScroll}\n >\n <div role='table' className={cx(styles.virtualTable, classNames.table)}>\n <VirtualHeaders\n headerGroups={headerGroups}\n className={cx(styles.stickyHeader, classNames.header)}\n />\n <div\n role='rowgroup'\n className={cx(styles.virtualBodyGroup, classNames.body)}\n style={{ height: totalHeight }}\n >\n <VirtualRows\n rows={rows}\n virtualizer={virtualizer}\n onRowClick={onRowClick}\n classNames={{\n row: classNames.row\n }}\n />\n </div>\n </div>\n {showLoaderRows && (\n <VirtualLoaderRows\n columns={visibleColumns}\n rowHeight={rowHeight}\n count={loadingRowCount}\n />\n )}\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAsBA;;AAgBY;;;AAuBZ;AAEA;;AAiBA;AAEA;AAWE;;;AAIE;AAAU;AAEV;;AAEA;;AAGA;;;;;AAME;;AASF;AAeM;;AAkBF;AAGN;AACF;AAEA;AAWE;AAUU;;;AAuBZ;AAEA;AAIM;;AAmBJ;AACA;;AAGA;;;;AAME;;AAEE;AACA;AACA;;;AAGH;AAED;AACE;;;;AAIE;;;AAIJ;;;AAMA;AACA;;;AAIE;AACE;;;;;AAOJ;;;;AAqCF;;"}
|
|
@@ -14,13 +14,13 @@ var context = require('./context.cjs');
|
|
|
14
14
|
var dataTable_types = require('./data-table.types.cjs');
|
|
15
15
|
var index = require('./utils/index.cjs');
|
|
16
16
|
|
|
17
|
-
function DataTableRoot({ data = [], columns, query, mode =
|
|
18
|
-
const defaultTableQuery = index.getDefaultTableQuery(defaultSort, query);
|
|
17
|
+
function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading = false, loadingRowCount = 3, defaultSort, children, onTableQueryChange, onLoadMore, onRowClick, onColumnVisibilityChange }) {
|
|
18
|
+
const defaultTableQuery = React.useMemo(() => index.getDefaultTableQuery(defaultSort, query), [defaultSort, query]);
|
|
19
19
|
const initialColumnVisibility = index.getInitialColumnVisibility(columns);
|
|
20
20
|
const [columnVisibility, setColumnVisibility] = React.useState(initialColumnVisibility);
|
|
21
21
|
const handleColumnVisibilityChange = React.useCallback((value) => {
|
|
22
|
-
setColumnVisibility(
|
|
23
|
-
const newValue = typeof value ===
|
|
22
|
+
setColumnVisibility(prev => {
|
|
23
|
+
const newValue = typeof value === 'function' ? value(prev) : value;
|
|
24
24
|
onColumnVisibilityChange?.(newValue);
|
|
25
25
|
return newValue;
|
|
26
26
|
});
|
|
@@ -29,12 +29,18 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
|
|
|
29
29
|
const oldQueryRef = React.useRef(null);
|
|
30
30
|
const reactTableState = React.useMemo(() => index.queryToTableState(tableQuery), [tableQuery]);
|
|
31
31
|
const onDisplaySettingsReset = React.useCallback(() => {
|
|
32
|
-
setTableQuery(
|
|
32
|
+
setTableQuery(prev => ({
|
|
33
|
+
...prev,
|
|
34
|
+
...defaultTableQuery,
|
|
35
|
+
sort: [defaultSort],
|
|
36
|
+
group_by: [dataTable_types.defaultGroupOption.id]
|
|
37
|
+
}));
|
|
33
38
|
handleColumnVisibilityChange(initialColumnVisibility);
|
|
34
39
|
}, [
|
|
40
|
+
defaultSort,
|
|
35
41
|
defaultTableQuery,
|
|
36
42
|
initialColumnVisibility,
|
|
37
|
-
handleColumnVisibilityChange
|
|
43
|
+
handleColumnVisibilityChange
|
|
38
44
|
]);
|
|
39
45
|
const group_by = tableQuery.group_by?.[0];
|
|
40
46
|
const columnsWithFilters = React.useMemo(() => index.getColumnsWithFilterFn(columns, tableQuery.filters), [columns, tableQuery.filters]);
|
|
@@ -43,7 +49,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
|
|
|
43
49
|
if (tableQuery &&
|
|
44
50
|
onTableQueryChange &&
|
|
45
51
|
index.hasQueryChanged(oldQueryRef.current, tableQuery) &&
|
|
46
|
-
mode ===
|
|
52
|
+
mode === 'server') {
|
|
47
53
|
onTableQueryChange(index.transformToDataTableQuery(tableQuery));
|
|
48
54
|
oldQueryRef.current = tableQuery;
|
|
49
55
|
}
|
|
@@ -53,37 +59,37 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
|
|
|
53
59
|
columns: columnsWithFilters,
|
|
54
60
|
getCoreRowModel: reactTable.getCoreRowModel(),
|
|
55
61
|
getExpandedRowModel: reactTable.getExpandedRowModel(),
|
|
56
|
-
getSubRows:
|
|
57
|
-
getSortedRowModel: mode ===
|
|
58
|
-
getFilteredRowModel: mode ===
|
|
59
|
-
manualSorting: mode ===
|
|
60
|
-
manualFiltering: mode ===
|
|
62
|
+
getSubRows: row => row?.subRows || [],
|
|
63
|
+
getSortedRowModel: mode === 'server' ? undefined : reactTable.getSortedRowModel(),
|
|
64
|
+
getFilteredRowModel: mode === 'server' ? undefined : reactTable.getFilteredRowModel(),
|
|
65
|
+
manualSorting: mode === 'server',
|
|
66
|
+
manualFiltering: mode === 'server',
|
|
61
67
|
onColumnVisibilityChange: handleColumnVisibilityChange,
|
|
62
|
-
globalFilterFn: mode ===
|
|
68
|
+
globalFilterFn: mode === 'server' ? undefined : 'auto',
|
|
63
69
|
initialState: {
|
|
64
|
-
columnVisibility: initialColumnVisibility
|
|
70
|
+
columnVisibility: initialColumnVisibility
|
|
65
71
|
},
|
|
66
72
|
filterFromLeafRows: true,
|
|
67
73
|
state: {
|
|
68
74
|
...reactTableState,
|
|
69
75
|
columnVisibility: columnVisibility,
|
|
70
|
-
expanded: group_by && group_by !== dataTable_types.defaultGroupOption.id ? true : undefined
|
|
71
|
-
}
|
|
76
|
+
expanded: group_by && group_by !== dataTable_types.defaultGroupOption.id ? true : undefined
|
|
77
|
+
}
|
|
72
78
|
});
|
|
73
79
|
function updateTableQuery(fn) {
|
|
74
|
-
setTableQuery(
|
|
80
|
+
setTableQuery(prev => fn(prev));
|
|
75
81
|
}
|
|
76
82
|
const loadMoreData = React.useCallback(() => {
|
|
77
|
-
if (mode ===
|
|
83
|
+
if (mode === 'server' && onLoadMore) {
|
|
78
84
|
onLoadMore();
|
|
79
85
|
}
|
|
80
86
|
}, [mode, onLoadMore]);
|
|
81
87
|
const searchQuery = query?.search;
|
|
82
88
|
React.useEffect(() => {
|
|
83
89
|
if (searchQuery) {
|
|
84
|
-
updateTableQuery(
|
|
90
|
+
updateTableQuery(prev => ({
|
|
85
91
|
...prev,
|
|
86
|
-
search: searchQuery
|
|
92
|
+
search: searchQuery
|
|
87
93
|
}));
|
|
88
94
|
}
|
|
89
95
|
}, [searchQuery]);
|
|
@@ -117,7 +123,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
|
|
|
117
123
|
defaultSort,
|
|
118
124
|
loadingRowCount,
|
|
119
125
|
onRowClick,
|
|
120
|
-
shouldShowFilters
|
|
126
|
+
shouldShowFilters
|
|
121
127
|
};
|
|
122
128
|
}, [
|
|
123
129
|
table,
|
|
@@ -131,7 +137,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
|
|
|
131
137
|
defaultSort,
|
|
132
138
|
loadingRowCount,
|
|
133
139
|
onRowClick,
|
|
134
|
-
shouldShowFilters
|
|
140
|
+
shouldShowFilters
|
|
135
141
|
]);
|
|
136
142
|
return (jsxRuntime.jsx(context.TableContext.Provider, { value: contextValue, children: children }));
|
|
137
143
|
}
|
|
@@ -141,7 +147,7 @@ const DataTable = Object.assign(DataTableRoot, {
|
|
|
141
147
|
Toolbar: toolbar.Toolbar,
|
|
142
148
|
Search: search.TableSearch,
|
|
143
149
|
Filters: filters.Filters,
|
|
144
|
-
DisplayControls: displaySettings.DisplaySettings
|
|
150
|
+
DisplayControls: displaySettings.DisplaySettings
|
|
145
151
|
});
|
|
146
152
|
|
|
147
153
|
exports.DataTable = DataTable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.cjs","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"data-table.cjs","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["'use client';\n\nimport {\n getCoreRowModel,\n getExpandedRowModel,\n getFilteredRowModel,\n getSortedRowModel,\n Updater,\n useReactTable,\n VisibilityState\n} from '@tanstack/react-table';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Content } from './components/content';\nimport { DisplaySettings } from './components/display-settings';\nimport { Filters } from './components/filters';\nimport { TableSearch } from './components/search';\nimport { Toolbar } from './components/toolbar';\nimport { VirtualizedContent } from './components/virtualized-content';\nimport { TableContext } from './context';\nimport {\n DataTableProps,\n defaultGroupOption,\n GroupedData,\n InternalQuery,\n TableContextType,\n TableQueryUpdateFn\n} from './data-table.types';\nimport {\n getColumnsWithFilterFn,\n getDefaultTableQuery,\n getInitialColumnVisibility,\n groupData,\n hasQueryChanged,\n queryToTableState,\n transformToDataTableQuery\n} from './utils';\n\nfunction DataTableRoot<TData, TValue>({\n data = [],\n columns,\n query,\n mode = 'client',\n isLoading = false,\n loadingRowCount = 3,\n defaultSort,\n children,\n onTableQueryChange,\n onLoadMore,\n onRowClick,\n onColumnVisibilityChange\n}: React.PropsWithChildren<DataTableProps<TData, TValue>>) {\n const defaultTableQuery = useMemo(\n () => getDefaultTableQuery(defaultSort, query),\n [defaultSort, query]\n );\n const initialColumnVisibility = getInitialColumnVisibility(columns);\n\n const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n initialColumnVisibility\n );\n const handleColumnVisibilityChange = useCallback(\n (value: Updater<VisibilityState>) => {\n setColumnVisibility(prev => {\n const newValue = typeof value === 'function' ? value(prev) : value;\n onColumnVisibilityChange?.(newValue);\n return newValue;\n });\n },\n [onColumnVisibilityChange]\n );\n\n const [tableQuery, setTableQuery] =\n useState<InternalQuery>(defaultTableQuery);\n\n const oldQueryRef = useRef<InternalQuery | null>(null);\n\n const reactTableState = useMemo(\n () => queryToTableState(tableQuery),\n [tableQuery]\n );\n\n const onDisplaySettingsReset = useCallback(() => {\n setTableQuery(prev => ({\n ...prev,\n ...defaultTableQuery,\n sort: [defaultSort],\n group_by: [defaultGroupOption.id]\n }));\n handleColumnVisibilityChange(initialColumnVisibility);\n }, [\n defaultSort,\n defaultTableQuery,\n initialColumnVisibility,\n handleColumnVisibilityChange\n ]);\n\n const group_by = tableQuery.group_by?.[0];\n\n const columnsWithFilters = useMemo(\n () => getColumnsWithFilterFn<TData, TValue>(columns, tableQuery.filters),\n [columns, tableQuery.filters]\n );\n\n const groupedData = useMemo(\n () => groupData(data, group_by, columns),\n [data, group_by, columns]\n );\n\n useEffect(() => {\n if (\n tableQuery &&\n onTableQueryChange &&\n hasQueryChanged(oldQueryRef.current, tableQuery) &&\n mode === 'server'\n ) {\n onTableQueryChange(transformToDataTableQuery(tableQuery));\n oldQueryRef.current = tableQuery;\n }\n }, [tableQuery, onTableQueryChange]);\n\n const table = useReactTable({\n data: groupedData as unknown as TData[],\n columns: columnsWithFilters,\n getCoreRowModel: getCoreRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n getSubRows: row => (row as unknown as GroupedData<TData>)?.subRows || [],\n getSortedRowModel: mode === 'server' ? undefined : getSortedRowModel(),\n getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),\n manualSorting: mode === 'server',\n manualFiltering: mode === 'server',\n onColumnVisibilityChange: handleColumnVisibilityChange,\n globalFilterFn: mode === 'server' ? undefined : 'auto',\n initialState: {\n columnVisibility: initialColumnVisibility\n },\n filterFromLeafRows: true,\n state: {\n ...reactTableState,\n columnVisibility: columnVisibility,\n expanded:\n group_by && group_by !== defaultGroupOption.id ? true : undefined\n }\n });\n\n function updateTableQuery(fn: TableQueryUpdateFn) {\n setTableQuery(prev => fn(prev));\n }\n\n const loadMoreData = useCallback(() => {\n if (mode === 'server' && onLoadMore) {\n onLoadMore();\n }\n }, [mode, onLoadMore]);\n\n const searchQuery = query?.search;\n useEffect(() => {\n if (searchQuery) {\n updateTableQuery(prev => ({\n ...prev,\n search: searchQuery\n }));\n }\n }, [searchQuery]);\n\n // Determine if filters should be visible\n // Filters should be visible if there is data OR if filters are applied (empty state)\n // Filters should NOT be visible if no data AND no filters (zero state)\n // Note: Search alone does not show the filter bar\n const shouldShowFilters = useMemo(() => {\n const hasFilters = tableQuery?.filters && tableQuery.filters.length > 0;\n\n try {\n const rowModel = table.getRowModel();\n const hasData = (rowModel?.rows?.length ?? 0) > 0;\n return hasData || hasFilters;\n } catch {\n // If table is not ready yet, check if we have initial data\n // If no filters and no data, don't show filters\n return hasFilters || data.length > 0;\n }\n }, [table, tableQuery, data.length]);\n\n const contextValue: TableContextType<TData, TValue> = useMemo(() => {\n return {\n table,\n columns,\n mode,\n isLoading,\n loadMoreData,\n tableQuery,\n updateTableQuery,\n onDisplaySettingsReset,\n defaultSort,\n loadingRowCount,\n onRowClick,\n shouldShowFilters\n };\n }, [\n table,\n columns,\n mode,\n isLoading,\n loadMoreData,\n tableQuery,\n updateTableQuery,\n onDisplaySettingsReset,\n defaultSort,\n loadingRowCount,\n onRowClick,\n shouldShowFilters\n ]);\n\n return (\n <TableContext.Provider value={contextValue}>\n {children}\n </TableContext.Provider>\n );\n}\n\nexport const DataTable = Object.assign(DataTableRoot, {\n Content: Content,\n VirtualizedContent: VirtualizedContent,\n Toolbar: Toolbar,\n Search: TableSearch,\n Filters: Filters,\n DisplayControls: DisplaySettings\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqCA;;AAkBE;;AAKA;;AAGM;AACA;AACA;AACF;AACF;;AAOF;AAEA;AAKA;AACE;AACE;AACA;;AAEA;AACD;;AAEH;;;;;AAKC;;;;;AAeC;;AAGE;;AAGA;AACA;;AAEJ;;AAGE;AACA;;;;AAIA;AACA;;;AAGA;;AAEA;AACE;AACD;AACD;AACA;AACE;AACA;AACA;AAED;AACF;;;;AAMD;AACE;AACE;;AAEJ;AAEA;;;AAGI;AACE;AACA;AACD;;AAEL;;;;;AAMA;AACE;AAEA;AACE;AACA;;;AAEA;;;AAGA;;;AAIJ;;;;;;;;;;;;;;;AAeA;;;;;;;;;;;;;AAaC;AAED;AAKF;;AAGE;AACA;AACA;AACA;AACA;AACA;AACD;;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { Content } from
|
|
2
|
-
import { DisplaySettings } from
|
|
3
|
-
import { Filters } from
|
|
4
|
-
import { Toolbar } from
|
|
5
|
-
import { VirtualizedContent } from
|
|
6
|
-
import { DataTableProps } from
|
|
7
|
-
declare function DataTableRoot<TData, TValue>({ data, columns, query, mode, isLoading, loadingRowCount, defaultSort, children, onTableQueryChange, onLoadMore, onRowClick, onColumnVisibilityChange
|
|
1
|
+
import { Content } from './components/content';
|
|
2
|
+
import { DisplaySettings } from './components/display-settings';
|
|
3
|
+
import { Filters } from './components/filters';
|
|
4
|
+
import { Toolbar } from './components/toolbar';
|
|
5
|
+
import { VirtualizedContent } from './components/virtualized-content';
|
|
6
|
+
import { DataTableProps } from './data-table.types';
|
|
7
|
+
declare function DataTableRoot<TData, TValue>({ data, columns, query, mode, isLoading, loadingRowCount, defaultSort, children, onTableQueryChange, onLoadMore, onRowClick, onColumnVisibilityChange }: React.PropsWithChildren<DataTableProps<TData, TValue>>): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export declare const DataTable: typeof DataTableRoot & {
|
|
9
9
|
Content: typeof Content;
|
|
10
10
|
VirtualizedContent: typeof VirtualizedContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../components/data-table/data-table.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EACL,cAAc,EAMf,MAAM,oBAAoB,CAAC;AAW5B,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,EACpC,IAAS,EACT,OAAO,EACP,KAAK,EACL,IAAe,EACf,SAAiB,EACjB,eAAmB,EACnB,WAAW,EACX,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,wBAAwB,
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../components/data-table/data-table.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EACL,cAAc,EAMf,MAAM,oBAAoB,CAAC;AAW5B,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,EACpC,IAAS,EACT,OAAO,EACP,KAAK,EACL,IAAe,EACf,SAAiB,EACjB,eAAmB,EACnB,WAAW,EACX,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,wBAAwB,EACzB,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,2CAuKxD;AAED,eAAO,MAAM,SAAS;;;;;;;CAOpB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { useReactTable, getCoreRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel } from '@tanstack/react-table';
|
|
4
|
-
import { useState, useCallback, useRef,
|
|
4
|
+
import { useMemo, useState, useCallback, useRef, useEffect } from 'react';
|
|
5
5
|
import { Content } from './components/content.js';
|
|
6
6
|
import { DisplaySettings } from './components/display-settings.js';
|
|
7
7
|
import { Filters } from './components/filters.js';
|
|
@@ -12,13 +12,13 @@ import { TableContext } from './context.js';
|
|
|
12
12
|
import { defaultGroupOption } from './data-table.types.js';
|
|
13
13
|
import { getDefaultTableQuery, getInitialColumnVisibility, queryToTableState, getColumnsWithFilterFn, groupData, hasQueryChanged, transformToDataTableQuery } from './utils/index.js';
|
|
14
14
|
|
|
15
|
-
function DataTableRoot({ data = [], columns, query, mode =
|
|
16
|
-
const defaultTableQuery = getDefaultTableQuery(defaultSort, query);
|
|
15
|
+
function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading = false, loadingRowCount = 3, defaultSort, children, onTableQueryChange, onLoadMore, onRowClick, onColumnVisibilityChange }) {
|
|
16
|
+
const defaultTableQuery = useMemo(() => getDefaultTableQuery(defaultSort, query), [defaultSort, query]);
|
|
17
17
|
const initialColumnVisibility = getInitialColumnVisibility(columns);
|
|
18
18
|
const [columnVisibility, setColumnVisibility] = useState(initialColumnVisibility);
|
|
19
19
|
const handleColumnVisibilityChange = useCallback((value) => {
|
|
20
|
-
setColumnVisibility(
|
|
21
|
-
const newValue = typeof value ===
|
|
20
|
+
setColumnVisibility(prev => {
|
|
21
|
+
const newValue = typeof value === 'function' ? value(prev) : value;
|
|
22
22
|
onColumnVisibilityChange?.(newValue);
|
|
23
23
|
return newValue;
|
|
24
24
|
});
|
|
@@ -27,12 +27,18 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
|
|
|
27
27
|
const oldQueryRef = useRef(null);
|
|
28
28
|
const reactTableState = useMemo(() => queryToTableState(tableQuery), [tableQuery]);
|
|
29
29
|
const onDisplaySettingsReset = useCallback(() => {
|
|
30
|
-
setTableQuery(
|
|
30
|
+
setTableQuery(prev => ({
|
|
31
|
+
...prev,
|
|
32
|
+
...defaultTableQuery,
|
|
33
|
+
sort: [defaultSort],
|
|
34
|
+
group_by: [defaultGroupOption.id]
|
|
35
|
+
}));
|
|
31
36
|
handleColumnVisibilityChange(initialColumnVisibility);
|
|
32
37
|
}, [
|
|
38
|
+
defaultSort,
|
|
33
39
|
defaultTableQuery,
|
|
34
40
|
initialColumnVisibility,
|
|
35
|
-
handleColumnVisibilityChange
|
|
41
|
+
handleColumnVisibilityChange
|
|
36
42
|
]);
|
|
37
43
|
const group_by = tableQuery.group_by?.[0];
|
|
38
44
|
const columnsWithFilters = useMemo(() => getColumnsWithFilterFn(columns, tableQuery.filters), [columns, tableQuery.filters]);
|
|
@@ -41,7 +47,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
|
|
|
41
47
|
if (tableQuery &&
|
|
42
48
|
onTableQueryChange &&
|
|
43
49
|
hasQueryChanged(oldQueryRef.current, tableQuery) &&
|
|
44
|
-
mode ===
|
|
50
|
+
mode === 'server') {
|
|
45
51
|
onTableQueryChange(transformToDataTableQuery(tableQuery));
|
|
46
52
|
oldQueryRef.current = tableQuery;
|
|
47
53
|
}
|
|
@@ -51,37 +57,37 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
|
|
|
51
57
|
columns: columnsWithFilters,
|
|
52
58
|
getCoreRowModel: getCoreRowModel(),
|
|
53
59
|
getExpandedRowModel: getExpandedRowModel(),
|
|
54
|
-
getSubRows:
|
|
55
|
-
getSortedRowModel: mode ===
|
|
56
|
-
getFilteredRowModel: mode ===
|
|
57
|
-
manualSorting: mode ===
|
|
58
|
-
manualFiltering: mode ===
|
|
60
|
+
getSubRows: row => row?.subRows || [],
|
|
61
|
+
getSortedRowModel: mode === 'server' ? undefined : getSortedRowModel(),
|
|
62
|
+
getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),
|
|
63
|
+
manualSorting: mode === 'server',
|
|
64
|
+
manualFiltering: mode === 'server',
|
|
59
65
|
onColumnVisibilityChange: handleColumnVisibilityChange,
|
|
60
|
-
globalFilterFn: mode ===
|
|
66
|
+
globalFilterFn: mode === 'server' ? undefined : 'auto',
|
|
61
67
|
initialState: {
|
|
62
|
-
columnVisibility: initialColumnVisibility
|
|
68
|
+
columnVisibility: initialColumnVisibility
|
|
63
69
|
},
|
|
64
70
|
filterFromLeafRows: true,
|
|
65
71
|
state: {
|
|
66
72
|
...reactTableState,
|
|
67
73
|
columnVisibility: columnVisibility,
|
|
68
|
-
expanded: group_by && group_by !== defaultGroupOption.id ? true : undefined
|
|
69
|
-
}
|
|
74
|
+
expanded: group_by && group_by !== defaultGroupOption.id ? true : undefined
|
|
75
|
+
}
|
|
70
76
|
});
|
|
71
77
|
function updateTableQuery(fn) {
|
|
72
|
-
setTableQuery(
|
|
78
|
+
setTableQuery(prev => fn(prev));
|
|
73
79
|
}
|
|
74
80
|
const loadMoreData = useCallback(() => {
|
|
75
|
-
if (mode ===
|
|
81
|
+
if (mode === 'server' && onLoadMore) {
|
|
76
82
|
onLoadMore();
|
|
77
83
|
}
|
|
78
84
|
}, [mode, onLoadMore]);
|
|
79
85
|
const searchQuery = query?.search;
|
|
80
86
|
useEffect(() => {
|
|
81
87
|
if (searchQuery) {
|
|
82
|
-
updateTableQuery(
|
|
88
|
+
updateTableQuery(prev => ({
|
|
83
89
|
...prev,
|
|
84
|
-
search: searchQuery
|
|
90
|
+
search: searchQuery
|
|
85
91
|
}));
|
|
86
92
|
}
|
|
87
93
|
}, [searchQuery]);
|
|
@@ -115,7 +121,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
|
|
|
115
121
|
defaultSort,
|
|
116
122
|
loadingRowCount,
|
|
117
123
|
onRowClick,
|
|
118
|
-
shouldShowFilters
|
|
124
|
+
shouldShowFilters
|
|
119
125
|
};
|
|
120
126
|
}, [
|
|
121
127
|
table,
|
|
@@ -129,7 +135,7 @@ function DataTableRoot({ data = [], columns, query, mode = "client", isLoading =
|
|
|
129
135
|
defaultSort,
|
|
130
136
|
loadingRowCount,
|
|
131
137
|
onRowClick,
|
|
132
|
-
shouldShowFilters
|
|
138
|
+
shouldShowFilters
|
|
133
139
|
]);
|
|
134
140
|
return (jsx(TableContext.Provider, { value: contextValue, children: children }));
|
|
135
141
|
}
|
|
@@ -139,7 +145,7 @@ const DataTable = Object.assign(DataTableRoot, {
|
|
|
139
145
|
Toolbar: Toolbar,
|
|
140
146
|
Search: TableSearch,
|
|
141
147
|
Filters: Filters,
|
|
142
|
-
DisplayControls: DisplaySettings
|
|
148
|
+
DisplayControls: DisplaySettings
|
|
143
149
|
});
|
|
144
150
|
|
|
145
151
|
export { DataTable };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.js","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"data-table.js","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["'use client';\n\nimport {\n getCoreRowModel,\n getExpandedRowModel,\n getFilteredRowModel,\n getSortedRowModel,\n Updater,\n useReactTable,\n VisibilityState\n} from '@tanstack/react-table';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Content } from './components/content';\nimport { DisplaySettings } from './components/display-settings';\nimport { Filters } from './components/filters';\nimport { TableSearch } from './components/search';\nimport { Toolbar } from './components/toolbar';\nimport { VirtualizedContent } from './components/virtualized-content';\nimport { TableContext } from './context';\nimport {\n DataTableProps,\n defaultGroupOption,\n GroupedData,\n InternalQuery,\n TableContextType,\n TableQueryUpdateFn\n} from './data-table.types';\nimport {\n getColumnsWithFilterFn,\n getDefaultTableQuery,\n getInitialColumnVisibility,\n groupData,\n hasQueryChanged,\n queryToTableState,\n transformToDataTableQuery\n} from './utils';\n\nfunction DataTableRoot<TData, TValue>({\n data = [],\n columns,\n query,\n mode = 'client',\n isLoading = false,\n loadingRowCount = 3,\n defaultSort,\n children,\n onTableQueryChange,\n onLoadMore,\n onRowClick,\n onColumnVisibilityChange\n}: React.PropsWithChildren<DataTableProps<TData, TValue>>) {\n const defaultTableQuery = useMemo(\n () => getDefaultTableQuery(defaultSort, query),\n [defaultSort, query]\n );\n const initialColumnVisibility = getInitialColumnVisibility(columns);\n\n const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n initialColumnVisibility\n );\n const handleColumnVisibilityChange = useCallback(\n (value: Updater<VisibilityState>) => {\n setColumnVisibility(prev => {\n const newValue = typeof value === 'function' ? value(prev) : value;\n onColumnVisibilityChange?.(newValue);\n return newValue;\n });\n },\n [onColumnVisibilityChange]\n );\n\n const [tableQuery, setTableQuery] =\n useState<InternalQuery>(defaultTableQuery);\n\n const oldQueryRef = useRef<InternalQuery | null>(null);\n\n const reactTableState = useMemo(\n () => queryToTableState(tableQuery),\n [tableQuery]\n );\n\n const onDisplaySettingsReset = useCallback(() => {\n setTableQuery(prev => ({\n ...prev,\n ...defaultTableQuery,\n sort: [defaultSort],\n group_by: [defaultGroupOption.id]\n }));\n handleColumnVisibilityChange(initialColumnVisibility);\n }, [\n defaultSort,\n defaultTableQuery,\n initialColumnVisibility,\n handleColumnVisibilityChange\n ]);\n\n const group_by = tableQuery.group_by?.[0];\n\n const columnsWithFilters = useMemo(\n () => getColumnsWithFilterFn<TData, TValue>(columns, tableQuery.filters),\n [columns, tableQuery.filters]\n );\n\n const groupedData = useMemo(\n () => groupData(data, group_by, columns),\n [data, group_by, columns]\n );\n\n useEffect(() => {\n if (\n tableQuery &&\n onTableQueryChange &&\n hasQueryChanged(oldQueryRef.current, tableQuery) &&\n mode === 'server'\n ) {\n onTableQueryChange(transformToDataTableQuery(tableQuery));\n oldQueryRef.current = tableQuery;\n }\n }, [tableQuery, onTableQueryChange]);\n\n const table = useReactTable({\n data: groupedData as unknown as TData[],\n columns: columnsWithFilters,\n getCoreRowModel: getCoreRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n getSubRows: row => (row as unknown as GroupedData<TData>)?.subRows || [],\n getSortedRowModel: mode === 'server' ? undefined : getSortedRowModel(),\n getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),\n manualSorting: mode === 'server',\n manualFiltering: mode === 'server',\n onColumnVisibilityChange: handleColumnVisibilityChange,\n globalFilterFn: mode === 'server' ? undefined : 'auto',\n initialState: {\n columnVisibility: initialColumnVisibility\n },\n filterFromLeafRows: true,\n state: {\n ...reactTableState,\n columnVisibility: columnVisibility,\n expanded:\n group_by && group_by !== defaultGroupOption.id ? true : undefined\n }\n });\n\n function updateTableQuery(fn: TableQueryUpdateFn) {\n setTableQuery(prev => fn(prev));\n }\n\n const loadMoreData = useCallback(() => {\n if (mode === 'server' && onLoadMore) {\n onLoadMore();\n }\n }, [mode, onLoadMore]);\n\n const searchQuery = query?.search;\n useEffect(() => {\n if (searchQuery) {\n updateTableQuery(prev => ({\n ...prev,\n search: searchQuery\n }));\n }\n }, [searchQuery]);\n\n // Determine if filters should be visible\n // Filters should be visible if there is data OR if filters are applied (empty state)\n // Filters should NOT be visible if no data AND no filters (zero state)\n // Note: Search alone does not show the filter bar\n const shouldShowFilters = useMemo(() => {\n const hasFilters = tableQuery?.filters && tableQuery.filters.length > 0;\n\n try {\n const rowModel = table.getRowModel();\n const hasData = (rowModel?.rows?.length ?? 0) > 0;\n return hasData || hasFilters;\n } catch {\n // If table is not ready yet, check if we have initial data\n // If no filters and no data, don't show filters\n return hasFilters || data.length > 0;\n }\n }, [table, tableQuery, data.length]);\n\n const contextValue: TableContextType<TData, TValue> = useMemo(() => {\n return {\n table,\n columns,\n mode,\n isLoading,\n loadMoreData,\n tableQuery,\n updateTableQuery,\n onDisplaySettingsReset,\n defaultSort,\n loadingRowCount,\n onRowClick,\n shouldShowFilters\n };\n }, [\n table,\n columns,\n mode,\n isLoading,\n loadMoreData,\n tableQuery,\n updateTableQuery,\n onDisplaySettingsReset,\n defaultSort,\n loadingRowCount,\n onRowClick,\n shouldShowFilters\n ]);\n\n return (\n <TableContext.Provider value={contextValue}>\n {children}\n </TableContext.Provider>\n );\n}\n\nexport const DataTable = Object.assign(DataTableRoot, {\n Content: Content,\n VirtualizedContent: VirtualizedContent,\n Toolbar: Toolbar,\n Search: TableSearch,\n Filters: Filters,\n DisplayControls: DisplaySettings\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqCA;;AAkBE;;AAKA;;AAGM;AACA;AACA;AACF;AACF;;AAOF;AAEA;AAKA;AACE;AACE;AACA;;AAEA;AACD;;AAEH;;;;;AAKC;;;;;AAeC;;AAGE;;AAGA;AACA;;AAEJ;;AAGE;AACA;;;;AAIA;AACA;;;AAGA;;AAEA;AACE;AACD;AACD;AACA;AACE;AACA;AACA;AAED;AACF;;;;AAMD;AACE;AACE;;AAEJ;AAEA;;;AAGI;AACE;AACA;AACD;;AAEL;;;;;AAMA;AACE;AAEA;AACE;AACA;;;AAEA;;;AAGA;;;AAIJ;;;;;;;;;;;;;;;AAeA;;;;;;;;;;;;;AAaC;AAED;AAKF;;AAGE;AACA;AACA;AACA;AACA;AACA;AACD;;"}
|
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var dayjs = require('dayjs');
|
|
3
4
|
var filters = require('../../../types/filters.cjs');
|
|
4
5
|
var dataTable_types = require('../data-table.types.cjs');
|
|
5
6
|
var filterOperations = require('./filter-operations.cjs');
|
|
6
7
|
|
|
7
8
|
function queryToTableState(query) {
|
|
8
9
|
const columnFilters = query.filters
|
|
9
|
-
?.filter(data =>
|
|
10
|
+
?.filter(data => {
|
|
11
|
+
if (data._type === filters.FilterType.date)
|
|
12
|
+
return dayjs(data.value).isValid();
|
|
13
|
+
if (data.value !== '')
|
|
14
|
+
return true;
|
|
15
|
+
return false;
|
|
16
|
+
})
|
|
10
17
|
?.map(data => {
|
|
11
18
|
const valueObject = data._type === filters.FilterType.date
|
|
12
19
|
? { date: data.value }
|
|
@@ -99,6 +106,17 @@ const isGroupChanged = (oldGroupBy = [], newGroupBy = []) => {
|
|
|
99
106
|
const isSearchChanged = (oldSearch, newSearch) => {
|
|
100
107
|
return oldSearch !== newSearch;
|
|
101
108
|
};
|
|
109
|
+
/**
|
|
110
|
+
* Checks if there is an active filter, search, or updated sort/grouping
|
|
111
|
+
* compared to the defaults. Used to distinguish zero state from empty state.
|
|
112
|
+
*/
|
|
113
|
+
const hasActiveQuery = (tableQuery, defaultSort) => {
|
|
114
|
+
const hasFilters = (tableQuery?.filters && tableQuery.filters.length > 0) || false;
|
|
115
|
+
const hasSearch = Boolean(tableQuery?.search && tableQuery.search.trim() !== '');
|
|
116
|
+
const sortChanged = isSortChanged([defaultSort], tableQuery.sort || []);
|
|
117
|
+
const groupChanged = isGroupChanged([dataTable_types.defaultGroupOption.id], tableQuery.group_by || []);
|
|
118
|
+
return hasFilters || hasSearch || sortChanged || groupChanged;
|
|
119
|
+
};
|
|
102
120
|
const hasQueryChanged = (oldQuery, newQuery) => {
|
|
103
121
|
if (!oldQuery)
|
|
104
122
|
return true;
|
|
@@ -119,7 +137,15 @@ function transformToDataTableQuery(query) {
|
|
|
119
137
|
const { group_by = [], filters: filters$1 = [], sort = [], ...rest } = query;
|
|
120
138
|
const sanitizedGroupBy = group_by?.filter(key => key !== dataTable_types.defaultGroupOption.id);
|
|
121
139
|
const sanitizedFilters = filters$1
|
|
122
|
-
?.filter(data =>
|
|
140
|
+
?.filter(data => {
|
|
141
|
+
if (data._type === filters.FilterType.select)
|
|
142
|
+
return true;
|
|
143
|
+
if (data._type === filters.FilterType.date)
|
|
144
|
+
return dayjs(data.value).isValid();
|
|
145
|
+
if (data.value !== '')
|
|
146
|
+
return true;
|
|
147
|
+
return false;
|
|
148
|
+
})
|
|
123
149
|
?.map(data => ({
|
|
124
150
|
name: data.name,
|
|
125
151
|
operator: filterOperations.getFilterOperator({
|
|
@@ -216,6 +242,7 @@ exports.getColumnsWithFilterFn = getColumnsWithFilterFn;
|
|
|
216
242
|
exports.getDefaultTableQuery = getDefaultTableQuery;
|
|
217
243
|
exports.getInitialColumnVisibility = getInitialColumnVisibility;
|
|
218
244
|
exports.groupData = groupData;
|
|
245
|
+
exports.hasActiveQuery = hasActiveQuery;
|
|
219
246
|
exports.hasQueryChanged = hasQueryChanged;
|
|
220
247
|
exports.queryToTableState = queryToTableState;
|
|
221
248
|
exports.transformToDataTableQuery = transformToDataTableQuery;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../components/data-table/utils/index.tsx"],"sourcesContent":["import { TableState } from '@tanstack/table-core';\n\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport {\n DataTableColumnDef,\n DataTableQuery,\n DataTableSort,\n GroupedData,\n InternalFilter,\n InternalQuery,\n SortOrders,\n defaultGroupOption\n} from '../data-table.types';\nimport {\n getFilterFn,\n getFilterOperator,\n getFilterValue\n} from './filter-operations';\n\nexport function queryToTableState(query: InternalQuery): Partial<TableState> {\n const columnFilters =\n query.filters\n ?.filter(data => data.value !== '')\n ?.map(data => {\n const valueObject =\n data._type === FilterType.date\n ? { date: data.value }\n : { value: data.value };\n return {\n value: valueObject,\n id: data?.name\n };\n }) || [];\n\n const sorting = query.sort?.map(data => ({\n id: data?.name,\n desc: data?.order === SortOrders.DESC\n }));\n return {\n columnFilters: columnFilters,\n sorting: sorting,\n globalFilter: query.search\n };\n}\n\nexport function getColumnsWithFilterFn<TData, TValue>(\n columns: DataTableColumnDef<TData, TValue>[] = [],\n filters: InternalFilter[] = []\n): DataTableColumnDef<TData, TValue>[] {\n return columns.map(column => {\n const colFilter = filters?.find(\n filter => filter.name === column.accessorKey\n );\n const filterFn = colFilter?.operator\n ? getFilterFn(column.filterType || FilterType.string, colFilter.operator)\n : undefined;\n\n return {\n ...column,\n filterFn\n };\n });\n}\n\nexport function groupData<TData>(\n data: TData[],\n group_by?: string,\n columns: DataTableColumnDef<TData, any>[] = []\n): GroupedData<TData>[] {\n if (!data) return [];\n if (!group_by || group_by === defaultGroupOption.id)\n return data as GroupedData<TData>[];\n\n const groupMap = new Map<string, TData[]>();\n data.forEach((currentData: TData) => {\n const item = currentData as Record<string, string>;\n const keyValue = item[group_by];\n if (!groupMap.has(keyValue)) {\n groupMap.set(keyValue, []);\n }\n groupMap.get(keyValue)?.push(item as TData);\n });\n\n const columnDef = columns.find(col => col.accessorKey === group_by);\n const showGroupCount = columnDef?.showGroupCount || false;\n const groupLablesMap = columnDef?.groupLabelsMap || {};\n const groupCountMap = columnDef?.groupCountMap || {};\n const groupedData: GroupedData<TData>[] = [];\n\n groupMap.forEach((value, key) => {\n groupedData.push({\n label: groupLablesMap[key] || key,\n group_key: key,\n subRows: value,\n count: groupCountMap[key] ?? value.length,\n showGroupCount\n });\n });\n\n return groupedData;\n}\n\nconst generateFilterMap = (\n filters: InternalFilter[] = []\n): Map<string, any> => {\n return new Map(\n filters\n ?.filter(data => data._type === FilterType.select || data.value !== '')\n .map(({ name, operator, value }) => [`${name}-${operator}`, value])\n );\n};\n\nconst generateSortMap = (sort: DataTableSort[] = []): Map<string, string> => {\n return new Map(sort.map(({ name, order }) => [name, order]));\n};\n\nconst isFilterChanged = (\n oldFilters: InternalFilter[] = [],\n newFilters: InternalFilter[] = []\n): boolean => {\n const oldFilterMap = generateFilterMap(oldFilters);\n const newFilterMap = generateFilterMap(newFilters);\n\n if (oldFilterMap.size !== newFilterMap.size) return true;\n\n return [...newFilterMap].some(\n ([key, value]) => oldFilterMap.get(key) !== value\n );\n};\n\nconst isSortChanged = (\n oldSort: DataTableSort[] = [],\n newSort: DataTableSort[] = []\n): boolean => {\n if (oldSort.length !== newSort.length) return true;\n\n const oldSortMap = generateSortMap(oldSort);\n const newSortMap = generateSortMap(newSort);\n\n return [...newSortMap].some(([key, order]) => oldSortMap.get(key) !== order);\n};\n\nconst isGroupChanged = (\n oldGroupBy: string[] = [],\n newGroupBy: string[] = []\n): boolean => {\n if (oldGroupBy.length !== newGroupBy.length) return true;\n\n const oldGroupSet = new Set(oldGroupBy);\n return newGroupBy.some(item => !oldGroupSet.has(item));\n};\n\nconst isSearchChanged = (oldSearch?: string, newSearch?: string): boolean => {\n return oldSearch !== newSearch;\n};\n\nexport const hasQueryChanged = (\n oldQuery: InternalQuery | null,\n newQuery: InternalQuery\n): boolean => {\n if (!oldQuery) return true;\n return (\n isFilterChanged(oldQuery.filters, newQuery.filters) ||\n isSortChanged(oldQuery.sort, newQuery.sort) ||\n isGroupChanged(oldQuery.group_by, newQuery.group_by) ||\n isSearchChanged(oldQuery.search, newQuery.search)\n );\n};\n\nexport function getInitialColumnVisibility<TData, TValue>(\n columns: DataTableColumnDef<TData, TValue>[] = []\n): Record<string, boolean> | {} {\n return columns.reduce((acc, col) => {\n return {\n ...acc,\n [col.accessorKey]: col.defaultHidden ? false : true\n };\n }, {});\n}\n\nexport function transformToDataTableQuery(\n query: InternalQuery\n): DataTableQuery {\n const { group_by = [], filters = [], sort = [], ...rest } = query;\n const sanitizedGroupBy = group_by?.filter(\n key => key !== defaultGroupOption.id\n );\n\n const sanitizedFilters =\n filters\n ?.filter(data => data._type === FilterType.select || data.value !== '')\n ?.map(data => ({\n name: data.name,\n operator: getFilterOperator({\n operator: data.operator,\n value: data.value,\n filterType: data._type\n }),\n ...getFilterValue({\n value: data.value,\n filterType: data._type,\n dataType: data._dataType,\n operator: data.operator\n })\n })) || [];\n\n return {\n ...rest,\n sort: sort,\n group_by: sanitizedGroupBy,\n filters: sanitizedFilters\n };\n}\n\n// Transform DataTableQuery to InternalQuery\n// This reverses the transformation done by transformToDataTableQuery\nexport function dataTableQueryToInternal(query: DataTableQuery): InternalQuery {\n const { filters, ...rest } = query;\n\n if (!filters) {\n return rest;\n }\n\n // Convert DataTableFilter[] to InternalFilter[]\n const internalFilters: InternalFilter[] = filters.map(filter => {\n const {\n operator,\n value,\n stringValue,\n numberValue,\n boolValue,\n ...filterRest\n } = filter;\n\n // Reverse the operator mapping and wildcard transformation\n let transformedFilter = {\n operator: operator as FilterOperatorTypes,\n value: value,\n ...(stringValue !== undefined && { stringValue }),\n ...(numberValue !== undefined && { numberValue }),\n ...(boolValue !== undefined && { boolValue })\n };\n\n // If operator is 'ilike', determine the original operator based on wildcards\n if (operator === 'ilike' && stringValue) {\n if (stringValue.startsWith('%') && stringValue.endsWith('%')) {\n transformedFilter = {\n operator: 'contains',\n value: stringValue.slice(1, -1) // Remove % from both ends\n };\n } else if (stringValue.endsWith('%')) {\n transformedFilter = {\n operator: 'starts_with',\n value: stringValue.slice(0, -1) // Remove % from end\n };\n } else if (stringValue.startsWith('%')) {\n transformedFilter = {\n operator: 'ends_with',\n value: stringValue.slice(1) // Remove % from start\n };\n } else {\n // Default to contains if no wildcards (shouldn't happen normally)\n transformedFilter = {\n operator: 'contains',\n value: stringValue\n };\n }\n }\n\n return {\n ...filterRest,\n ...transformedFilter,\n // We don't have type information, so leave it undefined\n // The UI will need to infer or set these based on column definitions\n _type: undefined,\n _dataType: undefined\n } as InternalFilter;\n });\n\n return {\n ...rest,\n filters: internalFilters\n };\n}\n\nexport function getDefaultTableQuery(\n defaultSort: DataTableSort,\n oldQuery: DataTableQuery = {}\n): InternalQuery {\n // Convert DataTableQuery to InternalQuery\n const internalQuery = dataTableQueryToInternal(oldQuery);\n\n return {\n sort: [defaultSort],\n group_by: [defaultGroupOption.id],\n ...internalQuery\n };\n}\n"],"names":["FilterType","SortOrders","filters","getFilterFn","defaultGroupOption","getFilterOperator","getFilterValue"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../components/data-table/utils/index.tsx"],"sourcesContent":["import { TableState } from '@tanstack/table-core';\nimport dayjs from 'dayjs';\n\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport {\n DataTableColumnDef,\n DataTableQuery,\n DataTableSort,\n defaultGroupOption,\n GroupedData,\n InternalFilter,\n InternalQuery,\n SortOrders\n} from '../data-table.types';\nimport {\n getFilterFn,\n getFilterOperator,\n getFilterValue\n} from './filter-operations';\n\nexport function queryToTableState(query: InternalQuery): Partial<TableState> {\n const columnFilters =\n query.filters\n ?.filter(data => {\n if (data._type === FilterType.date) return dayjs(data.value).isValid();\n if (data.value !== '') return true;\n return false;\n })\n ?.map(data => {\n const valueObject =\n data._type === FilterType.date\n ? { date: data.value }\n : { value: data.value };\n return {\n value: valueObject,\n id: data?.name\n };\n }) || [];\n\n const sorting = query.sort?.map(data => ({\n id: data?.name,\n desc: data?.order === SortOrders.DESC\n }));\n return {\n columnFilters: columnFilters,\n sorting: sorting,\n globalFilter: query.search\n };\n}\n\nexport function getColumnsWithFilterFn<TData, TValue>(\n columns: DataTableColumnDef<TData, TValue>[] = [],\n filters: InternalFilter[] = []\n): DataTableColumnDef<TData, TValue>[] {\n return columns.map(column => {\n const colFilter = filters?.find(\n filter => filter.name === column.accessorKey\n );\n const filterFn = colFilter?.operator\n ? getFilterFn(column.filterType || FilterType.string, colFilter.operator)\n : undefined;\n\n return {\n ...column,\n filterFn\n };\n });\n}\n\nexport function groupData<TData>(\n data: TData[],\n group_by?: string,\n columns: DataTableColumnDef<TData, any>[] = []\n): GroupedData<TData>[] {\n if (!data) return [];\n if (!group_by || group_by === defaultGroupOption.id)\n return data as GroupedData<TData>[];\n\n const groupMap = new Map<string, TData[]>();\n data.forEach((currentData: TData) => {\n const item = currentData as Record<string, string>;\n const keyValue = item[group_by];\n if (!groupMap.has(keyValue)) {\n groupMap.set(keyValue, []);\n }\n groupMap.get(keyValue)?.push(item as TData);\n });\n\n const columnDef = columns.find(col => col.accessorKey === group_by);\n const showGroupCount = columnDef?.showGroupCount || false;\n const groupLablesMap = columnDef?.groupLabelsMap || {};\n const groupCountMap = columnDef?.groupCountMap || {};\n const groupedData: GroupedData<TData>[] = [];\n\n groupMap.forEach((value, key) => {\n groupedData.push({\n label: groupLablesMap[key] || key,\n group_key: key,\n subRows: value,\n count: groupCountMap[key] ?? value.length,\n showGroupCount\n });\n });\n\n return groupedData;\n}\n\nconst generateFilterMap = (\n filters: InternalFilter[] = []\n): Map<string, any> => {\n return new Map(\n filters\n ?.filter(data => data._type === FilterType.select || data.value !== '')\n .map(({ name, operator, value }) => [`${name}-${operator}`, value])\n );\n};\n\nconst generateSortMap = (sort: DataTableSort[] = []): Map<string, string> => {\n return new Map(sort.map(({ name, order }) => [name, order]));\n};\n\nconst isFilterChanged = (\n oldFilters: InternalFilter[] = [],\n newFilters: InternalFilter[] = []\n): boolean => {\n const oldFilterMap = generateFilterMap(oldFilters);\n const newFilterMap = generateFilterMap(newFilters);\n\n if (oldFilterMap.size !== newFilterMap.size) return true;\n\n return [...newFilterMap].some(\n ([key, value]) => oldFilterMap.get(key) !== value\n );\n};\n\nconst isSortChanged = (\n oldSort: DataTableSort[] = [],\n newSort: DataTableSort[] = []\n): boolean => {\n if (oldSort.length !== newSort.length) return true;\n\n const oldSortMap = generateSortMap(oldSort);\n const newSortMap = generateSortMap(newSort);\n\n return [...newSortMap].some(([key, order]) => oldSortMap.get(key) !== order);\n};\n\nconst isGroupChanged = (\n oldGroupBy: string[] = [],\n newGroupBy: string[] = []\n): boolean => {\n if (oldGroupBy.length !== newGroupBy.length) return true;\n\n const oldGroupSet = new Set(oldGroupBy);\n return newGroupBy.some(item => !oldGroupSet.has(item));\n};\n\nconst isSearchChanged = (oldSearch?: string, newSearch?: string): boolean => {\n return oldSearch !== newSearch;\n};\n\n/**\n * Checks if there is an active filter, search, or updated sort/grouping\n * compared to the defaults. Used to distinguish zero state from empty state.\n */\nexport const hasActiveQuery = (\n tableQuery: InternalQuery,\n defaultSort: DataTableSort\n): boolean => {\n const hasFilters =\n (tableQuery?.filters && tableQuery.filters.length > 0) || false;\n const hasSearch = Boolean(\n tableQuery?.search && tableQuery.search.trim() !== ''\n );\n const sortChanged = isSortChanged([defaultSort], tableQuery.sort || []);\n const groupChanged = isGroupChanged(\n [defaultGroupOption.id],\n tableQuery.group_by || []\n );\n return hasFilters || hasSearch || sortChanged || groupChanged;\n};\n\nexport const hasQueryChanged = (\n oldQuery: InternalQuery | null,\n newQuery: InternalQuery\n): boolean => {\n if (!oldQuery) return true;\n return (\n isFilterChanged(oldQuery.filters, newQuery.filters) ||\n isSortChanged(oldQuery.sort, newQuery.sort) ||\n isGroupChanged(oldQuery.group_by, newQuery.group_by) ||\n isSearchChanged(oldQuery.search, newQuery.search)\n );\n};\n\nexport function getInitialColumnVisibility<TData, TValue>(\n columns: DataTableColumnDef<TData, TValue>[] = []\n): Record<string, boolean> | {} {\n return columns.reduce((acc, col) => {\n return {\n ...acc,\n [col.accessorKey]: col.defaultHidden ? false : true\n };\n }, {});\n}\n\nexport function transformToDataTableQuery(\n query: InternalQuery\n): DataTableQuery {\n const { group_by = [], filters = [], sort = [], ...rest } = query;\n const sanitizedGroupBy = group_by?.filter(\n key => key !== defaultGroupOption.id\n );\n\n const sanitizedFilters =\n filters\n ?.filter(data => {\n if (data._type === FilterType.select) return true;\n if (data._type === FilterType.date) return dayjs(data.value).isValid();\n if (data.value !== '') return true;\n return false;\n })\n ?.map(data => ({\n name: data.name,\n operator: getFilterOperator({\n operator: data.operator,\n value: data.value,\n filterType: data._type\n }),\n ...getFilterValue({\n value: data.value,\n filterType: data._type,\n dataType: data._dataType,\n operator: data.operator\n })\n })) || [];\n\n return {\n ...rest,\n sort: sort,\n group_by: sanitizedGroupBy,\n filters: sanitizedFilters\n };\n}\n\n// Transform DataTableQuery to InternalQuery\n// This reverses the transformation done by transformToDataTableQuery\nexport function dataTableQueryToInternal(query: DataTableQuery): InternalQuery {\n const { filters, ...rest } = query;\n\n if (!filters) {\n return rest;\n }\n\n // Convert DataTableFilter[] to InternalFilter[]\n const internalFilters: InternalFilter[] = filters.map(filter => {\n const {\n operator,\n value,\n stringValue,\n numberValue,\n boolValue,\n ...filterRest\n } = filter;\n\n // Reverse the operator mapping and wildcard transformation\n let transformedFilter = {\n operator: operator as FilterOperatorTypes,\n value: value,\n ...(stringValue !== undefined && { stringValue }),\n ...(numberValue !== undefined && { numberValue }),\n ...(boolValue !== undefined && { boolValue })\n };\n\n // If operator is 'ilike', determine the original operator based on wildcards\n if (operator === 'ilike' && stringValue) {\n if (stringValue.startsWith('%') && stringValue.endsWith('%')) {\n transformedFilter = {\n operator: 'contains',\n value: stringValue.slice(1, -1) // Remove % from both ends\n };\n } else if (stringValue.endsWith('%')) {\n transformedFilter = {\n operator: 'starts_with',\n value: stringValue.slice(0, -1) // Remove % from end\n };\n } else if (stringValue.startsWith('%')) {\n transformedFilter = {\n operator: 'ends_with',\n value: stringValue.slice(1) // Remove % from start\n };\n } else {\n // Default to contains if no wildcards (shouldn't happen normally)\n transformedFilter = {\n operator: 'contains',\n value: stringValue\n };\n }\n }\n\n return {\n ...filterRest,\n ...transformedFilter,\n // We don't have type information, so leave it undefined\n // The UI will need to infer or set these based on column definitions\n _type: undefined,\n _dataType: undefined\n } as InternalFilter;\n });\n\n return {\n ...rest,\n filters: internalFilters\n };\n}\n\nexport function getDefaultTableQuery(\n defaultSort: DataTableSort,\n oldQuery: DataTableQuery = {}\n): InternalQuery {\n // Convert DataTableQuery to InternalQuery\n const internalQuery = dataTableQueryToInternal(oldQuery);\n\n return {\n sort: [defaultSort],\n group_by: [defaultGroupOption.id],\n ...internalQuery\n };\n}\n"],"names":["FilterType","SortOrders","filters","getFilterFn","defaultGroupOption","getFilterOperator","getFilterValue"],"mappings":"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"}
|
|
@@ -3,6 +3,11 @@ import { DataTableColumnDef, DataTableQuery, DataTableSort, GroupedData, Interna
|
|
|
3
3
|
export declare function queryToTableState(query: InternalQuery): Partial<TableState>;
|
|
4
4
|
export declare function getColumnsWithFilterFn<TData, TValue>(columns?: DataTableColumnDef<TData, TValue>[], filters?: InternalFilter[]): DataTableColumnDef<TData, TValue>[];
|
|
5
5
|
export declare function groupData<TData>(data: TData[], group_by?: string, columns?: DataTableColumnDef<TData, any>[]): GroupedData<TData>[];
|
|
6
|
+
/**
|
|
7
|
+
* Checks if there is an active filter, search, or updated sort/grouping
|
|
8
|
+
* compared to the defaults. Used to distinguish zero state from empty state.
|
|
9
|
+
*/
|
|
10
|
+
export declare const hasActiveQuery: (tableQuery: InternalQuery, defaultSort: DataTableSort) => boolean;
|
|
6
11
|
export declare const hasQueryChanged: (oldQuery: InternalQuery | null, newQuery: InternalQuery) => boolean;
|
|
7
12
|
export declare function getInitialColumnVisibility<TData, TValue>(columns?: DataTableColumnDef<TData, TValue>[]): Record<string, boolean> | {};
|
|
8
13
|
export declare function transformToDataTableQuery(query: InternalQuery): DataTableQuery;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/data-table/utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/data-table/utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIlD,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,aAAa,EAEb,WAAW,EACX,cAAc,EACd,aAAa,EAEd,MAAM,qBAAqB,CAAC;AAO7B,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAAC,UAAU,CAAC,CA4B3E;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAClD,OAAO,GAAE,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,EAAO,EACjD,OAAO,GAAE,cAAc,EAAO,GAC7B,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAcrC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAC7B,IAAI,EAAE,KAAK,EAAE,EACb,QAAQ,CAAC,EAAE,MAAM,EACjB,OAAO,GAAE,kBAAkB,CAAC,KAAK,EAAE,GAAG,CAAC,EAAO,GAC7C,WAAW,CAAC,KAAK,CAAC,EAAE,CAgCtB;AAwDD;;;GAGG;AACH,eAAO,MAAM,cAAc,eACb,aAAa,eACZ,aAAa,KACzB,OAYF,CAAC;AAEF,eAAO,MAAM,eAAe,aAChB,aAAa,GAAG,IAAI,YACpB,aAAa,KACtB,OAQF,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,EACtD,OAAO,GAAE,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,EAAO,GAChD,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,EAAE,CAO9B;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,aAAa,GACnB,cAAc,CAmChB;AAID,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,cAAc,GAAG,aAAa,CAmE7E;AAED,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,aAAa,EAC1B,QAAQ,GAAE,cAAmB,GAC5B,aAAa,CASf"}
|
|
@@ -1,10 +1,17 @@
|
|
|
1
|
+
import dayjs from 'dayjs';
|
|
1
2
|
import { FilterType } from '../../../types/filters.js';
|
|
2
3
|
import { SortOrders, defaultGroupOption } from '../data-table.types.js';
|
|
3
4
|
import { getFilterFn, getFilterOperator, getFilterValue } from './filter-operations.js';
|
|
4
5
|
|
|
5
6
|
function queryToTableState(query) {
|
|
6
7
|
const columnFilters = query.filters
|
|
7
|
-
?.filter(data =>
|
|
8
|
+
?.filter(data => {
|
|
9
|
+
if (data._type === FilterType.date)
|
|
10
|
+
return dayjs(data.value).isValid();
|
|
11
|
+
if (data.value !== '')
|
|
12
|
+
return true;
|
|
13
|
+
return false;
|
|
14
|
+
})
|
|
8
15
|
?.map(data => {
|
|
9
16
|
const valueObject = data._type === FilterType.date
|
|
10
17
|
? { date: data.value }
|
|
@@ -97,6 +104,17 @@ const isGroupChanged = (oldGroupBy = [], newGroupBy = []) => {
|
|
|
97
104
|
const isSearchChanged = (oldSearch, newSearch) => {
|
|
98
105
|
return oldSearch !== newSearch;
|
|
99
106
|
};
|
|
107
|
+
/**
|
|
108
|
+
* Checks if there is an active filter, search, or updated sort/grouping
|
|
109
|
+
* compared to the defaults. Used to distinguish zero state from empty state.
|
|
110
|
+
*/
|
|
111
|
+
const hasActiveQuery = (tableQuery, defaultSort) => {
|
|
112
|
+
const hasFilters = (tableQuery?.filters && tableQuery.filters.length > 0) || false;
|
|
113
|
+
const hasSearch = Boolean(tableQuery?.search && tableQuery.search.trim() !== '');
|
|
114
|
+
const sortChanged = isSortChanged([defaultSort], tableQuery.sort || []);
|
|
115
|
+
const groupChanged = isGroupChanged([defaultGroupOption.id], tableQuery.group_by || []);
|
|
116
|
+
return hasFilters || hasSearch || sortChanged || groupChanged;
|
|
117
|
+
};
|
|
100
118
|
const hasQueryChanged = (oldQuery, newQuery) => {
|
|
101
119
|
if (!oldQuery)
|
|
102
120
|
return true;
|
|
@@ -117,7 +135,15 @@ function transformToDataTableQuery(query) {
|
|
|
117
135
|
const { group_by = [], filters = [], sort = [], ...rest } = query;
|
|
118
136
|
const sanitizedGroupBy = group_by?.filter(key => key !== defaultGroupOption.id);
|
|
119
137
|
const sanitizedFilters = filters
|
|
120
|
-
?.filter(data =>
|
|
138
|
+
?.filter(data => {
|
|
139
|
+
if (data._type === FilterType.select)
|
|
140
|
+
return true;
|
|
141
|
+
if (data._type === FilterType.date)
|
|
142
|
+
return dayjs(data.value).isValid();
|
|
143
|
+
if (data.value !== '')
|
|
144
|
+
return true;
|
|
145
|
+
return false;
|
|
146
|
+
})
|
|
121
147
|
?.map(data => ({
|
|
122
148
|
name: data.name,
|
|
123
149
|
operator: getFilterOperator({
|
|
@@ -209,5 +235,5 @@ function getDefaultTableQuery(defaultSort, oldQuery = {}) {
|
|
|
209
235
|
};
|
|
210
236
|
}
|
|
211
237
|
|
|
212
|
-
export { dataTableQueryToInternal, getColumnsWithFilterFn, getDefaultTableQuery, getInitialColumnVisibility, groupData, hasQueryChanged, queryToTableState, transformToDataTableQuery };
|
|
238
|
+
export { dataTableQueryToInternal, getColumnsWithFilterFn, getDefaultTableQuery, getInitialColumnVisibility, groupData, hasActiveQuery, hasQueryChanged, queryToTableState, transformToDataTableQuery };
|
|
213
239
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../components/data-table/utils/index.tsx"],"sourcesContent":["import { TableState } from '@tanstack/table-core';\n\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport {\n DataTableColumnDef,\n DataTableQuery,\n DataTableSort,\n GroupedData,\n InternalFilter,\n InternalQuery,\n SortOrders,\n defaultGroupOption\n} from '../data-table.types';\nimport {\n getFilterFn,\n getFilterOperator,\n getFilterValue\n} from './filter-operations';\n\nexport function queryToTableState(query: InternalQuery): Partial<TableState> {\n const columnFilters =\n query.filters\n ?.filter(data => data.value !== '')\n ?.map(data => {\n const valueObject =\n data._type === FilterType.date\n ? { date: data.value }\n : { value: data.value };\n return {\n value: valueObject,\n id: data?.name\n };\n }) || [];\n\n const sorting = query.sort?.map(data => ({\n id: data?.name,\n desc: data?.order === SortOrders.DESC\n }));\n return {\n columnFilters: columnFilters,\n sorting: sorting,\n globalFilter: query.search\n };\n}\n\nexport function getColumnsWithFilterFn<TData, TValue>(\n columns: DataTableColumnDef<TData, TValue>[] = [],\n filters: InternalFilter[] = []\n): DataTableColumnDef<TData, TValue>[] {\n return columns.map(column => {\n const colFilter = filters?.find(\n filter => filter.name === column.accessorKey\n );\n const filterFn = colFilter?.operator\n ? getFilterFn(column.filterType || FilterType.string, colFilter.operator)\n : undefined;\n\n return {\n ...column,\n filterFn\n };\n });\n}\n\nexport function groupData<TData>(\n data: TData[],\n group_by?: string,\n columns: DataTableColumnDef<TData, any>[] = []\n): GroupedData<TData>[] {\n if (!data) return [];\n if (!group_by || group_by === defaultGroupOption.id)\n return data as GroupedData<TData>[];\n\n const groupMap = new Map<string, TData[]>();\n data.forEach((currentData: TData) => {\n const item = currentData as Record<string, string>;\n const keyValue = item[group_by];\n if (!groupMap.has(keyValue)) {\n groupMap.set(keyValue, []);\n }\n groupMap.get(keyValue)?.push(item as TData);\n });\n\n const columnDef = columns.find(col => col.accessorKey === group_by);\n const showGroupCount = columnDef?.showGroupCount || false;\n const groupLablesMap = columnDef?.groupLabelsMap || {};\n const groupCountMap = columnDef?.groupCountMap || {};\n const groupedData: GroupedData<TData>[] = [];\n\n groupMap.forEach((value, key) => {\n groupedData.push({\n label: groupLablesMap[key] || key,\n group_key: key,\n subRows: value,\n count: groupCountMap[key] ?? value.length,\n showGroupCount\n });\n });\n\n return groupedData;\n}\n\nconst generateFilterMap = (\n filters: InternalFilter[] = []\n): Map<string, any> => {\n return new Map(\n filters\n ?.filter(data => data._type === FilterType.select || data.value !== '')\n .map(({ name, operator, value }) => [`${name}-${operator}`, value])\n );\n};\n\nconst generateSortMap = (sort: DataTableSort[] = []): Map<string, string> => {\n return new Map(sort.map(({ name, order }) => [name, order]));\n};\n\nconst isFilterChanged = (\n oldFilters: InternalFilter[] = [],\n newFilters: InternalFilter[] = []\n): boolean => {\n const oldFilterMap = generateFilterMap(oldFilters);\n const newFilterMap = generateFilterMap(newFilters);\n\n if (oldFilterMap.size !== newFilterMap.size) return true;\n\n return [...newFilterMap].some(\n ([key, value]) => oldFilterMap.get(key) !== value\n );\n};\n\nconst isSortChanged = (\n oldSort: DataTableSort[] = [],\n newSort: DataTableSort[] = []\n): boolean => {\n if (oldSort.length !== newSort.length) return true;\n\n const oldSortMap = generateSortMap(oldSort);\n const newSortMap = generateSortMap(newSort);\n\n return [...newSortMap].some(([key, order]) => oldSortMap.get(key) !== order);\n};\n\nconst isGroupChanged = (\n oldGroupBy: string[] = [],\n newGroupBy: string[] = []\n): boolean => {\n if (oldGroupBy.length !== newGroupBy.length) return true;\n\n const oldGroupSet = new Set(oldGroupBy);\n return newGroupBy.some(item => !oldGroupSet.has(item));\n};\n\nconst isSearchChanged = (oldSearch?: string, newSearch?: string): boolean => {\n return oldSearch !== newSearch;\n};\n\nexport const hasQueryChanged = (\n oldQuery: InternalQuery | null,\n newQuery: InternalQuery\n): boolean => {\n if (!oldQuery) return true;\n return (\n isFilterChanged(oldQuery.filters, newQuery.filters) ||\n isSortChanged(oldQuery.sort, newQuery.sort) ||\n isGroupChanged(oldQuery.group_by, newQuery.group_by) ||\n isSearchChanged(oldQuery.search, newQuery.search)\n );\n};\n\nexport function getInitialColumnVisibility<TData, TValue>(\n columns: DataTableColumnDef<TData, TValue>[] = []\n): Record<string, boolean> | {} {\n return columns.reduce((acc, col) => {\n return {\n ...acc,\n [col.accessorKey]: col.defaultHidden ? false : true\n };\n }, {});\n}\n\nexport function transformToDataTableQuery(\n query: InternalQuery\n): DataTableQuery {\n const { group_by = [], filters = [], sort = [], ...rest } = query;\n const sanitizedGroupBy = group_by?.filter(\n key => key !== defaultGroupOption.id\n );\n\n const sanitizedFilters =\n filters\n ?.filter(data => data._type === FilterType.select || data.value !== '')\n ?.map(data => ({\n name: data.name,\n operator: getFilterOperator({\n operator: data.operator,\n value: data.value,\n filterType: data._type\n }),\n ...getFilterValue({\n value: data.value,\n filterType: data._type,\n dataType: data._dataType,\n operator: data.operator\n })\n })) || [];\n\n return {\n ...rest,\n sort: sort,\n group_by: sanitizedGroupBy,\n filters: sanitizedFilters\n };\n}\n\n// Transform DataTableQuery to InternalQuery\n// This reverses the transformation done by transformToDataTableQuery\nexport function dataTableQueryToInternal(query: DataTableQuery): InternalQuery {\n const { filters, ...rest } = query;\n\n if (!filters) {\n return rest;\n }\n\n // Convert DataTableFilter[] to InternalFilter[]\n const internalFilters: InternalFilter[] = filters.map(filter => {\n const {\n operator,\n value,\n stringValue,\n numberValue,\n boolValue,\n ...filterRest\n } = filter;\n\n // Reverse the operator mapping and wildcard transformation\n let transformedFilter = {\n operator: operator as FilterOperatorTypes,\n value: value,\n ...(stringValue !== undefined && { stringValue }),\n ...(numberValue !== undefined && { numberValue }),\n ...(boolValue !== undefined && { boolValue })\n };\n\n // If operator is 'ilike', determine the original operator based on wildcards\n if (operator === 'ilike' && stringValue) {\n if (stringValue.startsWith('%') && stringValue.endsWith('%')) {\n transformedFilter = {\n operator: 'contains',\n value: stringValue.slice(1, -1) // Remove % from both ends\n };\n } else if (stringValue.endsWith('%')) {\n transformedFilter = {\n operator: 'starts_with',\n value: stringValue.slice(0, -1) // Remove % from end\n };\n } else if (stringValue.startsWith('%')) {\n transformedFilter = {\n operator: 'ends_with',\n value: stringValue.slice(1) // Remove % from start\n };\n } else {\n // Default to contains if no wildcards (shouldn't happen normally)\n transformedFilter = {\n operator: 'contains',\n value: stringValue\n };\n }\n }\n\n return {\n ...filterRest,\n ...transformedFilter,\n // We don't have type information, so leave it undefined\n // The UI will need to infer or set these based on column definitions\n _type: undefined,\n _dataType: undefined\n } as InternalFilter;\n });\n\n return {\n ...rest,\n filters: internalFilters\n };\n}\n\nexport function getDefaultTableQuery(\n defaultSort: DataTableSort,\n oldQuery: DataTableQuery = {}\n): InternalQuery {\n // Convert DataTableQuery to InternalQuery\n const internalQuery = dataTableQueryToInternal(oldQuery);\n\n return {\n sort: [defaultSort],\n group_by: [defaultGroupOption.id],\n ...internalQuery\n };\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../components/data-table/utils/index.tsx"],"sourcesContent":["import { TableState } from '@tanstack/table-core';\nimport dayjs from 'dayjs';\n\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport {\n DataTableColumnDef,\n DataTableQuery,\n DataTableSort,\n defaultGroupOption,\n GroupedData,\n InternalFilter,\n InternalQuery,\n SortOrders\n} from '../data-table.types';\nimport {\n getFilterFn,\n getFilterOperator,\n getFilterValue\n} from './filter-operations';\n\nexport function queryToTableState(query: InternalQuery): Partial<TableState> {\n const columnFilters =\n query.filters\n ?.filter(data => {\n if (data._type === FilterType.date) return dayjs(data.value).isValid();\n if (data.value !== '') return true;\n return false;\n })\n ?.map(data => {\n const valueObject =\n data._type === FilterType.date\n ? { date: data.value }\n : { value: data.value };\n return {\n value: valueObject,\n id: data?.name\n };\n }) || [];\n\n const sorting = query.sort?.map(data => ({\n id: data?.name,\n desc: data?.order === SortOrders.DESC\n }));\n return {\n columnFilters: columnFilters,\n sorting: sorting,\n globalFilter: query.search\n };\n}\n\nexport function getColumnsWithFilterFn<TData, TValue>(\n columns: DataTableColumnDef<TData, TValue>[] = [],\n filters: InternalFilter[] = []\n): DataTableColumnDef<TData, TValue>[] {\n return columns.map(column => {\n const colFilter = filters?.find(\n filter => filter.name === column.accessorKey\n );\n const filterFn = colFilter?.operator\n ? getFilterFn(column.filterType || FilterType.string, colFilter.operator)\n : undefined;\n\n return {\n ...column,\n filterFn\n };\n });\n}\n\nexport function groupData<TData>(\n data: TData[],\n group_by?: string,\n columns: DataTableColumnDef<TData, any>[] = []\n): GroupedData<TData>[] {\n if (!data) return [];\n if (!group_by || group_by === defaultGroupOption.id)\n return data as GroupedData<TData>[];\n\n const groupMap = new Map<string, TData[]>();\n data.forEach((currentData: TData) => {\n const item = currentData as Record<string, string>;\n const keyValue = item[group_by];\n if (!groupMap.has(keyValue)) {\n groupMap.set(keyValue, []);\n }\n groupMap.get(keyValue)?.push(item as TData);\n });\n\n const columnDef = columns.find(col => col.accessorKey === group_by);\n const showGroupCount = columnDef?.showGroupCount || false;\n const groupLablesMap = columnDef?.groupLabelsMap || {};\n const groupCountMap = columnDef?.groupCountMap || {};\n const groupedData: GroupedData<TData>[] = [];\n\n groupMap.forEach((value, key) => {\n groupedData.push({\n label: groupLablesMap[key] || key,\n group_key: key,\n subRows: value,\n count: groupCountMap[key] ?? value.length,\n showGroupCount\n });\n });\n\n return groupedData;\n}\n\nconst generateFilterMap = (\n filters: InternalFilter[] = []\n): Map<string, any> => {\n return new Map(\n filters\n ?.filter(data => data._type === FilterType.select || data.value !== '')\n .map(({ name, operator, value }) => [`${name}-${operator}`, value])\n );\n};\n\nconst generateSortMap = (sort: DataTableSort[] = []): Map<string, string> => {\n return new Map(sort.map(({ name, order }) => [name, order]));\n};\n\nconst isFilterChanged = (\n oldFilters: InternalFilter[] = [],\n newFilters: InternalFilter[] = []\n): boolean => {\n const oldFilterMap = generateFilterMap(oldFilters);\n const newFilterMap = generateFilterMap(newFilters);\n\n if (oldFilterMap.size !== newFilterMap.size) return true;\n\n return [...newFilterMap].some(\n ([key, value]) => oldFilterMap.get(key) !== value\n );\n};\n\nconst isSortChanged = (\n oldSort: DataTableSort[] = [],\n newSort: DataTableSort[] = []\n): boolean => {\n if (oldSort.length !== newSort.length) return true;\n\n const oldSortMap = generateSortMap(oldSort);\n const newSortMap = generateSortMap(newSort);\n\n return [...newSortMap].some(([key, order]) => oldSortMap.get(key) !== order);\n};\n\nconst isGroupChanged = (\n oldGroupBy: string[] = [],\n newGroupBy: string[] = []\n): boolean => {\n if (oldGroupBy.length !== newGroupBy.length) return true;\n\n const oldGroupSet = new Set(oldGroupBy);\n return newGroupBy.some(item => !oldGroupSet.has(item));\n};\n\nconst isSearchChanged = (oldSearch?: string, newSearch?: string): boolean => {\n return oldSearch !== newSearch;\n};\n\n/**\n * Checks if there is an active filter, search, or updated sort/grouping\n * compared to the defaults. Used to distinguish zero state from empty state.\n */\nexport const hasActiveQuery = (\n tableQuery: InternalQuery,\n defaultSort: DataTableSort\n): boolean => {\n const hasFilters =\n (tableQuery?.filters && tableQuery.filters.length > 0) || false;\n const hasSearch = Boolean(\n tableQuery?.search && tableQuery.search.trim() !== ''\n );\n const sortChanged = isSortChanged([defaultSort], tableQuery.sort || []);\n const groupChanged = isGroupChanged(\n [defaultGroupOption.id],\n tableQuery.group_by || []\n );\n return hasFilters || hasSearch || sortChanged || groupChanged;\n};\n\nexport const hasQueryChanged = (\n oldQuery: InternalQuery | null,\n newQuery: InternalQuery\n): boolean => {\n if (!oldQuery) return true;\n return (\n isFilterChanged(oldQuery.filters, newQuery.filters) ||\n isSortChanged(oldQuery.sort, newQuery.sort) ||\n isGroupChanged(oldQuery.group_by, newQuery.group_by) ||\n isSearchChanged(oldQuery.search, newQuery.search)\n );\n};\n\nexport function getInitialColumnVisibility<TData, TValue>(\n columns: DataTableColumnDef<TData, TValue>[] = []\n): Record<string, boolean> | {} {\n return columns.reduce((acc, col) => {\n return {\n ...acc,\n [col.accessorKey]: col.defaultHidden ? false : true\n };\n }, {});\n}\n\nexport function transformToDataTableQuery(\n query: InternalQuery\n): DataTableQuery {\n const { group_by = [], filters = [], sort = [], ...rest } = query;\n const sanitizedGroupBy = group_by?.filter(\n key => key !== defaultGroupOption.id\n );\n\n const sanitizedFilters =\n filters\n ?.filter(data => {\n if (data._type === FilterType.select) return true;\n if (data._type === FilterType.date) return dayjs(data.value).isValid();\n if (data.value !== '') return true;\n return false;\n })\n ?.map(data => ({\n name: data.name,\n operator: getFilterOperator({\n operator: data.operator,\n value: data.value,\n filterType: data._type\n }),\n ...getFilterValue({\n value: data.value,\n filterType: data._type,\n dataType: data._dataType,\n operator: data.operator\n })\n })) || [];\n\n return {\n ...rest,\n sort: sort,\n group_by: sanitizedGroupBy,\n filters: sanitizedFilters\n };\n}\n\n// Transform DataTableQuery to InternalQuery\n// This reverses the transformation done by transformToDataTableQuery\nexport function dataTableQueryToInternal(query: DataTableQuery): InternalQuery {\n const { filters, ...rest } = query;\n\n if (!filters) {\n return rest;\n }\n\n // Convert DataTableFilter[] to InternalFilter[]\n const internalFilters: InternalFilter[] = filters.map(filter => {\n const {\n operator,\n value,\n stringValue,\n numberValue,\n boolValue,\n ...filterRest\n } = filter;\n\n // Reverse the operator mapping and wildcard transformation\n let transformedFilter = {\n operator: operator as FilterOperatorTypes,\n value: value,\n ...(stringValue !== undefined && { stringValue }),\n ...(numberValue !== undefined && { numberValue }),\n ...(boolValue !== undefined && { boolValue })\n };\n\n // If operator is 'ilike', determine the original operator based on wildcards\n if (operator === 'ilike' && stringValue) {\n if (stringValue.startsWith('%') && stringValue.endsWith('%')) {\n transformedFilter = {\n operator: 'contains',\n value: stringValue.slice(1, -1) // Remove % from both ends\n };\n } else if (stringValue.endsWith('%')) {\n transformedFilter = {\n operator: 'starts_with',\n value: stringValue.slice(0, -1) // Remove % from end\n };\n } else if (stringValue.startsWith('%')) {\n transformedFilter = {\n operator: 'ends_with',\n value: stringValue.slice(1) // Remove % from start\n };\n } else {\n // Default to contains if no wildcards (shouldn't happen normally)\n transformedFilter = {\n operator: 'contains',\n value: stringValue\n };\n }\n }\n\n return {\n ...filterRest,\n ...transformedFilter,\n // We don't have type information, so leave it undefined\n // The UI will need to infer or set these based on column definitions\n _type: undefined,\n _dataType: undefined\n } as InternalFilter;\n });\n\n return {\n ...rest,\n filters: internalFilters\n };\n}\n\nexport function getDefaultTableQuery(\n defaultSort: DataTableSort,\n oldQuery: DataTableQuery = {}\n): InternalQuery {\n // Convert DataTableQuery to InternalQuery\n const internalQuery = dataTableQueryToInternal(oldQuery);\n\n return {\n sort: [defaultSort],\n group_by: [defaultGroupOption.id],\n ...internalQuery\n };\n}\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@raystack/apsara",
|
|
3
|
-
"version": "0.56.
|
|
3
|
+
"version": "0.56.6",
|
|
4
4
|
"types": "dist/index.d.ts",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"engines": {
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"semver": "^7.6.0",
|
|
91
91
|
"typescript": "~5.4.3",
|
|
92
92
|
"vitest": "^3.2.4",
|
|
93
|
-
"@raystack/tools-config": "0.56.
|
|
93
|
+
"@raystack/tools-config": "0.56.6"
|
|
94
94
|
},
|
|
95
95
|
"dependencies": {
|
|
96
96
|
"@ariakit/react": "^0.4.16",
|