@coveord/plasma-mantine 49.3.1 → 49.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +29 -29
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/table/Table.js +2 -1
- package/dist/cjs/components/table/Table.js.map +1 -1
- package/dist/definitions/components/table/Table.d.ts +2 -2
- package/dist/definitions/components/table/Table.d.ts.map +1 -1
- package/dist/esm/components/table/Table.js +3 -2
- package/dist/esm/components/table/Table.js.map +1 -1
- package/package.json +1 -1
- package/src/components/table/Table.tsx +3 -1
- package/src/components/table/__tests__/TableActions.spec.tsx +16 -0
|
@@ -120,7 +120,8 @@ var Table = function(param) {
|
|
|
120
120
|
getRowId: getRowId,
|
|
121
121
|
getRowCanExpand: function(row) {
|
|
122
122
|
return (_ref = !!(getExpandChildren === null || getExpandChildren === void 0 ? void 0 : getExpandChildren(row.original))) !== null && _ref !== void 0 ? _ref : false;
|
|
123
|
-
}
|
|
123
|
+
},
|
|
124
|
+
enableRowSelection: !loading
|
|
124
125
|
}, options));
|
|
125
126
|
var _useState = _slicedToArray((0, _react.useState)(table.initialState), 2), state = _useState[0], setState = _useState[1];
|
|
126
127
|
table.setOptions(function(prev) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n ColumnDef,\n defaultColumnSizing,\n flexRender,\n getCoreRowModel,\n Row,\n TableState,\n useReactTable,\n} from '@tanstack/react-table';\nimport {CoreOptions, InitialTableState, TableOptions} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableCollapsibleColumn, TableAccordionColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\ninterface TableStylesParams {\n hasHeader: boolean;\n multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0];\n return {\n table: {\n width: '100%',\n '& td:first-of-type, th:first-of-type > *': {\n paddingLeft: theme.spacing.xl,\n },\n '& tbody td': {\n verticalAlign: 'top',\n },\n },\n\n header: {\n position: 'sticky',\n top: hasHeader ? 69 : 0,\n backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n transition: 'box-shadow 150ms ease',\n zIndex: 12, // skeleton is 11\n\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\nexport interface TableProps<T> {\n /**\n * Data to display in the table\n */\n data: T[];\n /**\n * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n */\n getRowId?: CoreOptions<T>['getRowId'];\n /**\n * Columns to display in the table.\n *\n * @see https://tanstack.com/table/v8/docs/guide/column-defs\n */\n columns: Array<ColumnDef<T>>;\n /**\n * Function called when the table mounts\n *\n * @param state the state of the table\n */\n onMount?: onTableChangeEvent;\n /**\n * Function called when the table should update\n *\n * @param state the state of the table\n */\n onChange?: onTableChangeEvent;\n /**\n * Function that generates the expandable content of a row\n * Return null for rows that don't need to be expandable\n *\n * @param datum the row for which the children should be generated.\n */\n getExpandChildren?: (datum: T) => ReactNode;\n /**\n * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n */\n noDataChildren?: ReactNode;\n /**\n * Whether the table is loading or not\n *\n * @default false\n */\n loading?: boolean;\n /**\n * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n *\n * @example\n * <Table ...>\n * <Table.Header>\n * <div>Hello</div>\n * </Table.Header>\n * </Table>\n */\n children?: ReactNode;\n\n /**\n * Initial state of the table\n */\n initialState?: InitialTableState & Partial<TableFormType>;\n /**\n * Action passed when user double clicks on a row\n */\n doubleClickAction?: (datum: T) => void;\n /**\n * Whether the user can select multiple rows in order to perform actions in bulk\n *\n * @default false\n */\n multiRowSelectionEnabled?: boolean;\n\n options?: Omit<\n Partial<TableOptions<T>>,\n | 'initialState'\n | 'data'\n | 'columns'\n | 'manualPagination'\n | 'enableMultiRowSelection'\n | 'getRowId'\n | 'getRowCanExpand'\n >;\n}\n\ninterface TableType {\n <T>(props: TableProps<T>): ReactElement;\n Actions: typeof TableActions;\n Filter: typeof TableFilter;\n Footer: typeof TableFooter;\n Header: typeof TableHeader;\n Pagination: typeof TablePagination;\n PerPage: typeof TablePerPage;\n Predicate: typeof TablePredicate;\n DateRangePicker: typeof TableDateRangePicker;\n CollapsibleColumn: typeof TableCollapsibleColumn;\n AccordionColumn: typeof TableAccordionColumn;\n}\n\nexport const Table: TableType = <T,>({\n data,\n getRowId,\n noDataChildren,\n getExpandChildren,\n initialState = {},\n columns,\n onMount,\n onChange,\n children,\n loading = false,\n doubleClickAction,\n multiRowSelectionEnabled,\n options = {},\n}: TableProps<T>) => {\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const header = convertedChildren.find((child) => child.type === TableHeader);\n const footer = convertedChildren.find((child) => child.type === TableFooter);\n\n const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n const form = useForm<TableFormType>({\n initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n });\n const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n const table = useReactTable({\n initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n data,\n columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: options?.getPaginationRowModel === undefined,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n ...options,\n });\n const [state, setState] = useState<TableState>(table.initialState);\n table.setOptions((prev) => ({\n ...prev,\n state,\n onStateChange: setState,\n }));\n const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\n\n const triggerChange = () => onChange?.({...state, ...form.values});\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('predicates', {});\n setState((prevState) => ({...prevState, globalFilter: ''}));\n }, []);\n\n const outsideClickRef = useClickOutside(() => {\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n });\n\n if (!data) {\n return (\n <Center sx={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={() => row.toggleSelected()}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n aria-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx({\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n >\n <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Skeleton>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={columns.length + 1}\n style={{\n padding: 0,\n borderTop: row.getIsExpanded() ? undefined : 'none',\n borderBottom: row.getIsExpanded() ? undefined : 'none',\n }}\n >\n <Collapse in={row.getIsExpanded()}>\n <Box px=\"sm\" py=\"xs\">\n {rowChildren}\n </Box>\n </Collapse>\n </td>\n </tr>\n ) : null}\n </Fragment>\n );\n });\n\n return (\n <Box ref={outsideClickRef}>\n <TableContext.Provider\n value={{\n onChange: triggerChange,\n state,\n setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\n getPageCount: table.getPageCount,\n }}\n >\n {header}\n <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n <thead className={classes.header}>\n {table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ))}\n </thead>\n <tbody>\n {rows.length ? (\n rows\n ) : (\n <tr>\n <td colSpan={columns.length}>{noDataChildren}</td>\n </tr>\n )}\n </tbody>\n </MantineTable>\n {footer}\n </TableContext.Provider>\n </Box>\n );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Table","useStyles","createStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","options","convertedChildren","Children","toArray","find","child","type","TableHeader","footer","TableFooter","predicates","dateRange","initialStateWithoutForm","form","useForm","initialValues","cx","classes","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","original","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","useEffect","useDidUpdate","globalFilter","sorting","clearFilters","useCallback","setFieldValue","prevState","outsideClickRef","useClickOutside","Center","sx","flexGrow","Loader","rows","getRowModel","map","rowChildren","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","defaultColumnSizing","td","style","id","TableCollapsibleColumn","Skeleton","visible","borderRadius","flexRender","columnDef","getContext","colSpan","length","borderTop","getIsExpanded","Collapse","in","Box","px","py","ref","TableContext","Provider","value","containerRef","getPageCount","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","AccordionColumn","TableAccordionColumn","DateRangePicker","TableDateRangePicker"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n ColumnDef,\n defaultColumnSizing,\n flexRender,\n getCoreRowModel,\n Row,\n TableState,\n useReactTable,\n} from '@tanstack/react-table';\nimport {CoreOptions, InitialTableState, TableOptions} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\ninterface TableStylesParams {\n hasHeader: boolean;\n multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0];\n return {\n table: {\n width: '100%',\n '& td:first-of-type, th:first-of-type > *': {\n paddingLeft: theme.spacing.xl,\n },\n '& tbody td': {\n verticalAlign: 'top',\n },\n },\n\n header: {\n position: 'sticky',\n top: hasHeader ? 69 : 0,\n backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n transition: 'box-shadow 150ms ease',\n zIndex: 12, // skeleton is 11\n\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\nexport interface TableProps<T> {\n /**\n * Data to display in the table\n */\n data: T[];\n /**\n * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n */\n getRowId?: CoreOptions<T>['getRowId'];\n /**\n * Columns to display in the table.\n *\n * @see https://tanstack.com/table/v8/docs/guide/column-defs\n */\n columns: Array<ColumnDef<T>>;\n /**\n * Function called when the table mounts\n *\n * @param state the state of the table\n */\n onMount?: onTableChangeEvent;\n /**\n * Function called when the table should update\n *\n * @param state the state of the table\n */\n onChange?: onTableChangeEvent;\n /**\n * Function that generates the expandable content of a row\n * Return null for rows that don't need to be expandable\n *\n * @param datum the row for which the children should be generated.\n */\n getExpandChildren?: (datum: T) => ReactNode;\n /**\n * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n */\n noDataChildren?: ReactNode;\n /**\n * Whether the table is loading or not\n *\n * @default false\n */\n loading?: boolean;\n /**\n * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n *\n * @example\n * <Table ...>\n * <Table.Header>\n * <div>Hello</div>\n * </Table.Header>\n * </Table>\n */\n children?: ReactNode;\n\n /**\n * Initial state of the table\n */\n initialState?: InitialTableState & Partial<TableFormType>;\n /**\n * Action passed when user double clicks on a row\n */\n doubleClickAction?: (datum: T) => void;\n /**\n * Whether the user can select multiple rows in order to perform actions in bulk\n *\n * @default false\n */\n multiRowSelectionEnabled?: boolean;\n\n options?: Omit<\n Partial<TableOptions<T>>,\n | 'initialState'\n | 'data'\n | 'columns'\n | 'manualPagination'\n | 'enableMultiRowSelection'\n | 'getRowId'\n | 'getRowCanExpand'\n | 'enableRowSelection'\n >;\n}\n\ninterface TableType {\n <T>(props: TableProps<T>): ReactElement;\n Actions: typeof TableActions;\n Filter: typeof TableFilter;\n Footer: typeof TableFooter;\n Header: typeof TableHeader;\n Pagination: typeof TablePagination;\n PerPage: typeof TablePerPage;\n Predicate: typeof TablePredicate;\n DateRangePicker: typeof TableDateRangePicker;\n CollapsibleColumn: typeof TableCollapsibleColumn;\n AccordionColumn: typeof TableAccordionColumn;\n}\n\nexport const Table: TableType = <T,>({\n data,\n getRowId,\n noDataChildren,\n getExpandChildren,\n initialState = {},\n columns,\n onMount,\n onChange,\n children,\n loading = false,\n doubleClickAction,\n multiRowSelectionEnabled,\n options = {},\n}: TableProps<T>) => {\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const header = convertedChildren.find((child) => child.type === TableHeader);\n const footer = convertedChildren.find((child) => child.type === TableFooter);\n\n const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n const form = useForm<TableFormType>({\n initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n });\n const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n const table = useReactTable({\n initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n data,\n columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: options?.getPaginationRowModel === undefined,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n enableRowSelection: !loading,\n ...options,\n });\n const [state, setState] = useState<TableState>(table.initialState);\n table.setOptions((prev) => ({\n ...prev,\n state,\n onStateChange: setState,\n }));\n const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\n\n const triggerChange = () => onChange?.({...state, ...form.values});\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('predicates', {});\n setState((prevState) => ({...prevState, globalFilter: ''}));\n }, []);\n\n const outsideClickRef = useClickOutside(() => {\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n });\n\n if (!data) {\n return (\n <Center sx={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={() => row.toggleSelected()}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n aria-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx({\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n >\n <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Skeleton>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={columns.length + 1}\n style={{\n padding: 0,\n borderTop: row.getIsExpanded() ? undefined : 'none',\n borderBottom: row.getIsExpanded() ? undefined : 'none',\n }}\n >\n <Collapse in={row.getIsExpanded()}>\n <Box px=\"sm\" py=\"xs\">\n {rowChildren}\n </Box>\n </Collapse>\n </td>\n </tr>\n ) : null}\n </Fragment>\n );\n });\n\n return (\n <Box ref={outsideClickRef}>\n <TableContext.Provider\n value={{\n onChange: triggerChange,\n state,\n setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\n getPageCount: table.getPageCount,\n }}\n >\n {header}\n <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n <thead className={classes.header}>\n {table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ))}\n </thead>\n <tbody>\n {rows.length ? (\n rows\n ) : (\n <tr>\n <td colSpan={columns.length}>{noDataChildren}</td>\n </tr>\n )}\n </tbody>\n </MantineTable>\n {footer}\n </TableContext.Provider>\n </Box>\n );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Table","useStyles","createStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","options","convertedChildren","Children","toArray","find","child","type","TableHeader","footer","TableFooter","predicates","dateRange","initialStateWithoutForm","form","useForm","initialValues","cx","classes","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","original","enableRowSelection","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","useEffect","useDidUpdate","globalFilter","sorting","clearFilters","useCallback","setFieldValue","prevState","outsideClickRef","useClickOutside","Center","sx","flexGrow","Loader","rows","getRowModel","map","rowChildren","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","defaultColumnSizing","td","style","id","TableCollapsibleColumn","Skeleton","visible","borderRadius","flexRender","columnDef","getContext","colSpan","length","borderTop","getIsExpanded","Collapse","in","Box","px","py","ref","TableContext","Provider","value","containerRef","getPageCount","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","AccordionColumn","TableAccordionColumn","DateRangePicker","TableDateRangePicker"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import { ColumnDef } from '@tanstack/react-table';
|
|
|
2
2
|
import { CoreOptions, InitialTableState, TableOptions } from '@tanstack/table-core';
|
|
3
3
|
import { ReactElement, ReactNode } from 'react';
|
|
4
4
|
import { TableActions } from './TableActions';
|
|
5
|
-
import {
|
|
5
|
+
import { TableAccordionColumn, TableCollapsibleColumn } from './TableCollapsibleColumn';
|
|
6
6
|
import { onTableChangeEvent, TableFormType } from './TableContext';
|
|
7
7
|
import { TableDateRangePicker } from './TableDateRangePicker';
|
|
8
8
|
import { TableFilter } from './TableFilter';
|
|
@@ -80,7 +80,7 @@ export interface TableProps<T> {
|
|
|
80
80
|
* @default false
|
|
81
81
|
*/
|
|
82
82
|
multiRowSelectionEnabled?: boolean;
|
|
83
|
-
options?: Omit<Partial<TableOptions<T>>, 'initialState' | 'data' | 'columns' | 'manualPagination' | 'enableMultiRowSelection' | 'getRowId' | 'getRowCanExpand'>;
|
|
83
|
+
options?: Omit<Partial<TableOptions<T>>, 'initialState' | 'data' | 'columns' | 'manualPagination' | 'enableMultiRowSelection' | 'getRowId' | 'getRowCanExpand' | 'enableRowSelection'>;
|
|
84
84
|
}
|
|
85
85
|
interface TableType {
|
|
86
86
|
<T>(props: TableProps<T>): ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EACH,SAAS,EAOZ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAElF,OAAO,EAAqB,YAAY,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAEpG,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EACH,SAAS,EAOZ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAElF,OAAO,EAAqB,YAAY,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAEpG,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,oBAAoB,EAAE,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AACtF,OAAO,EAAC,kBAAkB,EAAgB,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC/E,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AA4DhD,MAAM,WAAW,UAAU,CAAC,CAAC;IACzB;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IACtC;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,SAAS,CAAC;IAC5C;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;IAC1D;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC,OAAO,CAAC,EAAE,IAAI,CACV,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EACtB,cAAc,GACd,MAAM,GACN,SAAS,GACT,kBAAkB,GAClB,yBAAyB,GACzB,UAAU,GACV,iBAAiB,GACjB,oBAAoB,CACzB,CAAC;CACL;AAED,UAAU,SAAS;IACf,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC;IACxC,OAAO,EAAE,OAAO,YAAY,CAAC;IAC7B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,UAAU,EAAE,OAAO,eAAe,CAAC;IACnC,OAAO,EAAE,OAAO,YAAY,CAAC;IAC7B,SAAS,EAAE,OAAO,cAAc,CAAC;IACjC,eAAe,EAAE,OAAO,oBAAoB,CAAC;IAC7C,iBAAiB,EAAE,OAAO,sBAAsB,CAAC;IACjD,eAAe,EAAE,OAAO,oBAAoB,CAAC;CAChD;AAED,eAAO,MAAM,KAAK,EAAE,SA0KnB,CAAC"}
|
|
@@ -11,7 +11,7 @@ import { defaultColumnSizing, flexRender, getCoreRowModel, useReactTable } from
|
|
|
11
11
|
import defaultsDeep from "lodash.defaultsdeep";
|
|
12
12
|
import { Children, Fragment, useCallback, useEffect, useState } from "react";
|
|
13
13
|
import { TableActions } from "./TableActions";
|
|
14
|
-
import {
|
|
14
|
+
import { TableAccordionColumn, TableCollapsibleColumn } from "./TableCollapsibleColumn";
|
|
15
15
|
import { TableContext } from "./TableContext";
|
|
16
16
|
import { TableDateRangePicker } from "./TableDateRangePicker";
|
|
17
17
|
import { TableFilter } from "./TableFilter";
|
|
@@ -109,7 +109,8 @@ export var Table = function(param) {
|
|
|
109
109
|
getRowId: getRowId,
|
|
110
110
|
getRowCanExpand: function(row) {
|
|
111
111
|
return (_ref = !!(getExpandChildren === null || getExpandChildren === void 0 ? void 0 : getExpandChildren(row.original))) !== null && _ref !== void 0 ? _ref : false;
|
|
112
|
-
}
|
|
112
|
+
},
|
|
113
|
+
enableRowSelection: !loading
|
|
113
114
|
}, options));
|
|
114
115
|
var _useState = _sliced_to_array(useState(table.initialState), 2), state = _useState[0], setState = _useState[1];
|
|
115
116
|
table.setOptions(function(prev) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n ColumnDef,\n defaultColumnSizing,\n flexRender,\n getCoreRowModel,\n Row,\n TableState,\n useReactTable,\n} from '@tanstack/react-table';\nimport {CoreOptions, InitialTableState, TableOptions} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableCollapsibleColumn, TableAccordionColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\ninterface TableStylesParams {\n hasHeader: boolean;\n multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0];\n return {\n table: {\n width: '100%',\n '& td:first-of-type, th:first-of-type > *': {\n paddingLeft: theme.spacing.xl,\n },\n '& tbody td': {\n verticalAlign: 'top',\n },\n },\n\n header: {\n position: 'sticky',\n top: hasHeader ? 69 : 0,\n backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n transition: 'box-shadow 150ms ease',\n zIndex: 12, // skeleton is 11\n\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\nexport interface TableProps<T> {\n /**\n * Data to display in the table\n */\n data: T[];\n /**\n * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n */\n getRowId?: CoreOptions<T>['getRowId'];\n /**\n * Columns to display in the table.\n *\n * @see https://tanstack.com/table/v8/docs/guide/column-defs\n */\n columns: Array<ColumnDef<T>>;\n /**\n * Function called when the table mounts\n *\n * @param state the state of the table\n */\n onMount?: onTableChangeEvent;\n /**\n * Function called when the table should update\n *\n * @param state the state of the table\n */\n onChange?: onTableChangeEvent;\n /**\n * Function that generates the expandable content of a row\n * Return null for rows that don't need to be expandable\n *\n * @param datum the row for which the children should be generated.\n */\n getExpandChildren?: (datum: T) => ReactNode;\n /**\n * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n */\n noDataChildren?: ReactNode;\n /**\n * Whether the table is loading or not\n *\n * @default false\n */\n loading?: boolean;\n /**\n * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n *\n * @example\n * <Table ...>\n * <Table.Header>\n * <div>Hello</div>\n * </Table.Header>\n * </Table>\n */\n children?: ReactNode;\n\n /**\n * Initial state of the table\n */\n initialState?: InitialTableState & Partial<TableFormType>;\n /**\n * Action passed when user double clicks on a row\n */\n doubleClickAction?: (datum: T) => void;\n /**\n * Whether the user can select multiple rows in order to perform actions in bulk\n *\n * @default false\n */\n multiRowSelectionEnabled?: boolean;\n\n options?: Omit<\n Partial<TableOptions<T>>,\n | 'initialState'\n | 'data'\n | 'columns'\n | 'manualPagination'\n | 'enableMultiRowSelection'\n | 'getRowId'\n | 'getRowCanExpand'\n >;\n}\n\ninterface TableType {\n <T>(props: TableProps<T>): ReactElement;\n Actions: typeof TableActions;\n Filter: typeof TableFilter;\n Footer: typeof TableFooter;\n Header: typeof TableHeader;\n Pagination: typeof TablePagination;\n PerPage: typeof TablePerPage;\n Predicate: typeof TablePredicate;\n DateRangePicker: typeof TableDateRangePicker;\n CollapsibleColumn: typeof TableCollapsibleColumn;\n AccordionColumn: typeof TableAccordionColumn;\n}\n\nexport const Table: TableType = <T,>({\n data,\n getRowId,\n noDataChildren,\n getExpandChildren,\n initialState = {},\n columns,\n onMount,\n onChange,\n children,\n loading = false,\n doubleClickAction,\n multiRowSelectionEnabled,\n options = {},\n}: TableProps<T>) => {\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const header = convertedChildren.find((child) => child.type === TableHeader);\n const footer = convertedChildren.find((child) => child.type === TableFooter);\n\n const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n const form = useForm<TableFormType>({\n initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n });\n const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n const table = useReactTable({\n initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n data,\n columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: options?.getPaginationRowModel === undefined,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n ...options,\n });\n const [state, setState] = useState<TableState>(table.initialState);\n table.setOptions((prev) => ({\n ...prev,\n state,\n onStateChange: setState,\n }));\n const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\n\n const triggerChange = () => onChange?.({...state, ...form.values});\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('predicates', {});\n setState((prevState) => ({...prevState, globalFilter: ''}));\n }, []);\n\n const outsideClickRef = useClickOutside(() => {\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n });\n\n if (!data) {\n return (\n <Center sx={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={() => row.toggleSelected()}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n aria-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx({\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n >\n <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Skeleton>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={columns.length + 1}\n style={{\n padding: 0,\n borderTop: row.getIsExpanded() ? undefined : 'none',\n borderBottom: row.getIsExpanded() ? undefined : 'none',\n }}\n >\n <Collapse in={row.getIsExpanded()}>\n <Box px=\"sm\" py=\"xs\">\n {rowChildren}\n </Box>\n </Collapse>\n </td>\n </tr>\n ) : null}\n </Fragment>\n );\n });\n\n return (\n <Box ref={outsideClickRef}>\n <TableContext.Provider\n value={{\n onChange: triggerChange,\n state,\n setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\n getPageCount: table.getPageCount,\n }}\n >\n {header}\n <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n <thead className={classes.header}>\n {table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ))}\n </thead>\n <tbody>\n {rows.length ? (\n rows\n ) : (\n <tr>\n <td colSpan={columns.length}>{noDataChildren}</td>\n </tr>\n )}\n </tbody>\n </MantineTable>\n {footer}\n </TableContext.Provider>\n </Box>\n );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Box","Center","Collapse","createStyles","Loader","Skeleton","Table","MantineTable","useForm","useClickOutside","useDidUpdate","defaultColumnSizing","flexRender","getCoreRowModel","useReactTable","defaultsDeep","Children","Fragment","useCallback","useEffect","useState","TableActions","TableCollapsibleColumn","TableAccordionColumn","TableContext","TableDateRangePicker","TableFilter","TableFooter","TableHeader","TablePagination","TablePerPage","TablePredicate","TableSelectableColumn","Th","useRowSelection","useStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","options","convertedChildren","toArray","find","child","type","footer","predicates","dateRange","initialStateWithoutForm","form","initialValues","cx","classes","pagination","pageSize","DEFAULT_SIZE","concat","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","original","state","setState","setOptions","prev","onStateChange","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","globalFilter","sorting","clearFilters","setFieldValue","prevState","outsideClickRef","sx","flexGrow","rows","getRowModel","map","rowChildren","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","td","style","id","visible","borderRadius","columnDef","getContext","colSpan","length","borderTop","getIsExpanded","in","px","py","ref","Provider","value","containerRef","getPageCount","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","tbody","Actions","Filter","Footer","Header","Pagination","Predicate","PerPage","CollapsibleColumn","AccordionColumn","DateRangePicker"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n ColumnDef,\n defaultColumnSizing,\n flexRender,\n getCoreRowModel,\n Row,\n TableState,\n useReactTable,\n} from '@tanstack/react-table';\nimport {CoreOptions, InitialTableState, TableOptions} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\ninterface TableStylesParams {\n hasHeader: boolean;\n multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0];\n return {\n table: {\n width: '100%',\n '& td:first-of-type, th:first-of-type > *': {\n paddingLeft: theme.spacing.xl,\n },\n '& tbody td': {\n verticalAlign: 'top',\n },\n },\n\n header: {\n position: 'sticky',\n top: hasHeader ? 69 : 0,\n backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n transition: 'box-shadow 150ms ease',\n zIndex: 12, // skeleton is 11\n\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\nexport interface TableProps<T> {\n /**\n * Data to display in the table\n */\n data: T[];\n /**\n * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n */\n getRowId?: CoreOptions<T>['getRowId'];\n /**\n * Columns to display in the table.\n *\n * @see https://tanstack.com/table/v8/docs/guide/column-defs\n */\n columns: Array<ColumnDef<T>>;\n /**\n * Function called when the table mounts\n *\n * @param state the state of the table\n */\n onMount?: onTableChangeEvent;\n /**\n * Function called when the table should update\n *\n * @param state the state of the table\n */\n onChange?: onTableChangeEvent;\n /**\n * Function that generates the expandable content of a row\n * Return null for rows that don't need to be expandable\n *\n * @param datum the row for which the children should be generated.\n */\n getExpandChildren?: (datum: T) => ReactNode;\n /**\n * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n */\n noDataChildren?: ReactNode;\n /**\n * Whether the table is loading or not\n *\n * @default false\n */\n loading?: boolean;\n /**\n * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n *\n * @example\n * <Table ...>\n * <Table.Header>\n * <div>Hello</div>\n * </Table.Header>\n * </Table>\n */\n children?: ReactNode;\n\n /**\n * Initial state of the table\n */\n initialState?: InitialTableState & Partial<TableFormType>;\n /**\n * Action passed when user double clicks on a row\n */\n doubleClickAction?: (datum: T) => void;\n /**\n * Whether the user can select multiple rows in order to perform actions in bulk\n *\n * @default false\n */\n multiRowSelectionEnabled?: boolean;\n\n options?: Omit<\n Partial<TableOptions<T>>,\n | 'initialState'\n | 'data'\n | 'columns'\n | 'manualPagination'\n | 'enableMultiRowSelection'\n | 'getRowId'\n | 'getRowCanExpand'\n | 'enableRowSelection'\n >;\n}\n\ninterface TableType {\n <T>(props: TableProps<T>): ReactElement;\n Actions: typeof TableActions;\n Filter: typeof TableFilter;\n Footer: typeof TableFooter;\n Header: typeof TableHeader;\n Pagination: typeof TablePagination;\n PerPage: typeof TablePerPage;\n Predicate: typeof TablePredicate;\n DateRangePicker: typeof TableDateRangePicker;\n CollapsibleColumn: typeof TableCollapsibleColumn;\n AccordionColumn: typeof TableAccordionColumn;\n}\n\nexport const Table: TableType = <T,>({\n data,\n getRowId,\n noDataChildren,\n getExpandChildren,\n initialState = {},\n columns,\n onMount,\n onChange,\n children,\n loading = false,\n doubleClickAction,\n multiRowSelectionEnabled,\n options = {},\n}: TableProps<T>) => {\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const header = convertedChildren.find((child) => child.type === TableHeader);\n const footer = convertedChildren.find((child) => child.type === TableFooter);\n\n const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n const form = useForm<TableFormType>({\n initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n });\n const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n const table = useReactTable({\n initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n data,\n columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: options?.getPaginationRowModel === undefined,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n enableRowSelection: !loading,\n ...options,\n });\n const [state, setState] = useState<TableState>(table.initialState);\n table.setOptions((prev) => ({\n ...prev,\n state,\n onStateChange: setState,\n }));\n const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\n\n const triggerChange = () => onChange?.({...state, ...form.values});\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('predicates', {});\n setState((prevState) => ({...prevState, globalFilter: ''}));\n }, []);\n\n const outsideClickRef = useClickOutside(() => {\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n });\n\n if (!data) {\n return (\n <Center sx={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={() => row.toggleSelected()}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n aria-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx({\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n >\n <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Skeleton>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={columns.length + 1}\n style={{\n padding: 0,\n borderTop: row.getIsExpanded() ? undefined : 'none',\n borderBottom: row.getIsExpanded() ? undefined : 'none',\n }}\n >\n <Collapse in={row.getIsExpanded()}>\n <Box px=\"sm\" py=\"xs\">\n {rowChildren}\n </Box>\n </Collapse>\n </td>\n </tr>\n ) : null}\n </Fragment>\n );\n });\n\n return (\n <Box ref={outsideClickRef}>\n <TableContext.Provider\n value={{\n onChange: triggerChange,\n state,\n setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\n getPageCount: table.getPageCount,\n }}\n >\n {header}\n <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n <thead className={classes.header}>\n {table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ))}\n </thead>\n <tbody>\n {rows.length ? (\n rows\n ) : (\n <tr>\n <td colSpan={columns.length}>{noDataChildren}</td>\n </tr>\n )}\n </tbody>\n </MantineTable>\n {footer}\n </TableContext.Provider>\n </Box>\n );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Box","Center","Collapse","createStyles","Loader","Skeleton","Table","MantineTable","useForm","useClickOutside","useDidUpdate","defaultColumnSizing","flexRender","getCoreRowModel","useReactTable","defaultsDeep","Children","Fragment","useCallback","useEffect","useState","TableActions","TableAccordionColumn","TableCollapsibleColumn","TableContext","TableDateRangePicker","TableFilter","TableFooter","TableHeader","TablePagination","TablePerPage","TablePredicate","TableSelectableColumn","Th","useRowSelection","useStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","options","convertedChildren","toArray","find","child","type","footer","predicates","dateRange","initialStateWithoutForm","form","initialValues","cx","classes","pagination","pageSize","DEFAULT_SIZE","concat","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","original","enableRowSelection","state","setState","setOptions","prev","onStateChange","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","globalFilter","sorting","clearFilters","setFieldValue","prevState","outsideClickRef","sx","flexGrow","rows","getRowModel","map","rowChildren","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","td","style","id","visible","borderRadius","columnDef","getContext","colSpan","length","borderTop","getIsExpanded","in","px","py","ref","Provider","value","containerRef","getPageCount","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","tbody","Actions","Filter","Footer","Header","Pagination","Predicate","PerPage","CollapsibleColumn","AccordionColumn","DateRangePicker"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -15,7 +15,7 @@ import defaultsDeep from 'lodash.defaultsdeep';
|
|
|
15
15
|
import {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';
|
|
16
16
|
|
|
17
17
|
import {TableActions} from './TableActions';
|
|
18
|
-
import {
|
|
18
|
+
import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
|
|
19
19
|
import {onTableChangeEvent, TableContext, TableFormType} from './TableContext';
|
|
20
20
|
import {TableDateRangePicker} from './TableDateRangePicker';
|
|
21
21
|
import {TableFilter} from './TableFilter';
|
|
@@ -163,6 +163,7 @@ export interface TableProps<T> {
|
|
|
163
163
|
| 'enableMultiRowSelection'
|
|
164
164
|
| 'getRowId'
|
|
165
165
|
| 'getRowCanExpand'
|
|
166
|
+
| 'enableRowSelection'
|
|
166
167
|
>;
|
|
167
168
|
}
|
|
168
169
|
|
|
@@ -214,6 +215,7 @@ export const Table: TableType = <T,>({
|
|
|
214
215
|
enableMultiRowSelection: !!multiRowSelectionEnabled,
|
|
215
216
|
getRowId,
|
|
216
217
|
getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,
|
|
218
|
+
enableRowSelection: !loading,
|
|
217
219
|
...options,
|
|
218
220
|
});
|
|
219
221
|
const [state, setState] = useState<TableState>(table.initialState);
|
|
@@ -35,6 +35,22 @@ describe('Table.Actions', () => {
|
|
|
35
35
|
expect(screen.getByRole('button', {name: 'Eat vegetable'})).toBeVisible();
|
|
36
36
|
});
|
|
37
37
|
|
|
38
|
+
it('does not display the action when a loading row is selected', async () => {
|
|
39
|
+
const user = userEvent.setup({delay: null});
|
|
40
|
+
render(
|
|
41
|
+
<Table<RowData> data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} loading={true}>
|
|
42
|
+
<Table.Header>
|
|
43
|
+
<Table.Actions>{(datum: RowData) => <Button>Eat {datum.name}</Button>}</Table.Actions>
|
|
44
|
+
</Table.Header>
|
|
45
|
+
</Table>
|
|
46
|
+
);
|
|
47
|
+
await user.click(screen.getByRole('cell', {name: 'fruit'}));
|
|
48
|
+
expect(screen.getByRole('row', {name: 'fruit', selected: false})).toBeInTheDocument();
|
|
49
|
+
expect(screen.queryByRole('button', {name: 'Eat fruit'})).not.toBeInTheDocument();
|
|
50
|
+
expect(screen.getByRole('row', {name: 'vegetable', selected: false})).toBeInTheDocument();
|
|
51
|
+
expect(screen.queryByRole('button', {name: 'Eat vegetable'})).not.toBeInTheDocument();
|
|
52
|
+
});
|
|
53
|
+
|
|
38
54
|
describe('when multi row selection is enabled', () => {
|
|
39
55
|
it('passes down an array of selected rows', async () => {
|
|
40
56
|
const user = userEvent.setup({delay: null});
|