diff --git a/packages/mantine-react-table/package.json b/packages/mantine-react-table/package.json index 932f9dd7b..f1f447a45 100644 --- a/packages/mantine-react-table/package.json +++ b/packages/mantine-react-table/package.json @@ -1,5 +1,5 @@ { - "version": "2.0.0-alpha.15", + "version": "2.0.0-alpha.16", "license": "MIT", "name": "mantine-react-table", "description": "A fully featured Mantine implementation of TanStack React Table V8, written from the ground up in TypeScript.", diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx index 13709fec4..af5608b3f 100644 --- a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx +++ b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx @@ -216,12 +216,7 @@ export const MRT_TableBodyCell = ({ {...tableCellProps} __vars={{ '--mrt-align': - tableCellProps.align ?? - (columnDefType === 'group' - ? 'center' - : direction.dir === 'rtl' - ? 'right' - : 'left'), + tableCellProps.align ?? (direction.dir === 'rtl' ? 'right' : 'left'), '--mrt-table-cell-left': column.getIsPinned() === 'left' ? `${column.getStart('left')}` diff --git a/packages/mantine-react-table/src/components/body/MRT_TableDetailPanel.tsx b/packages/mantine-react-table/src/components/body/MRT_TableDetailPanel.tsx index e6f265628..cada65a12 100644 --- a/packages/mantine-react-table/src/components/body/MRT_TableDetailPanel.tsx +++ b/packages/mantine-react-table/src/components/body/MRT_TableDetailPanel.tsx @@ -101,7 +101,7 @@ export const MRT_TableDetailPanel = ({ row.getIsExpanded() && classes['inner-expanded'], virtualRow && classes['inner-virtual'], )} - p={row.getIsExpanded() ? 'md' : 0} + p={row.getIsExpanded() && DetailPanel ? 'md' : 0} > {enableRowVirtualization ? ( row.getIsExpanded() && DetailPanel diff --git a/packages/mantine-react-table/src/components/buttons/MRT_ExpandButton.module.css b/packages/mantine-react-table/src/components/buttons/MRT_ExpandButton.module.css index 184424a10..a93743083 100644 --- a/packages/mantine-react-table/src/components/buttons/MRT_ExpandButton.module.css +++ b/packages/mantine-react-table/src/components/buttons/MRT_ExpandButton.module.css @@ -3,6 +3,7 @@ &:disabled { background-color: transparent; border: none; + opacity: 0.3; } &:hover { opacity: 1; diff --git a/packages/mantine-react-table/src/components/buttons/MRT_ExpandButton.tsx b/packages/mantine-react-table/src/components/buttons/MRT_ExpandButton.tsx index 7f0ede31c..f1c534ad5 100644 --- a/packages/mantine-react-table/src/components/buttons/MRT_ExpandButton.tsx +++ b/packages/mantine-react-table/src/components/buttons/MRT_ExpandButton.tsx @@ -45,6 +45,8 @@ export const MRT_ExpandButton = ({ const canExpand = row.getCanExpand(); const isExpanded = row.getIsExpanded(); + const DetailPanel = !!renderDetailPanel?.({ row, table }); + const handleToggleExpand = (event: MouseEvent) => { event.stopPropagation(); row.toggleExpanded(); @@ -55,7 +57,7 @@ export const MRT_ExpandButton = ({ return ( ({ ({ diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.module.css b/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.module.css index 5b67daf39..3150c2be7 100644 --- a/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.module.css +++ b/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.module.css @@ -13,13 +13,17 @@ background-clip: padding-box; font-weight: bold; overflow: visible; - padding-bottom: calc(var(--mrt-table-head-cell-padding) * 2 / 3 * 1px); padding: calc(var(--mrt-table-head-cell-padding) * 1px); + padding-bottom: calc(var(--mrt-table-head-cell-padding) * 2 / 3 * 1px); position: relative; transition: padding 150ms ease-in-out; vertical-align: top; z-index: 1; + &:active { + z-index: 3; + } + &[data-column-pinned] { background-color: light-dark( var(--mantine-color-white), @@ -49,7 +53,6 @@ } &[data-resizing] { - z-index: 3; &[data-resizing='ltr'] { border-right: var(--resize-thickness) solid var(--resize-border-color); } diff --git a/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx b/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx index ea0cbadc0..e665383f1 100644 --- a/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx +++ b/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx @@ -1,9 +1,5 @@ import { type FocusEvent, type KeyboardEvent, useState } from 'react'; -import { - Select, - TextInput, - type TextInputProps, -} from '@mantine/core'; +import { Select, TextInput, type TextInputProps } from '@mantine/core'; import { type MRT_Cell, type MRT_CellValue, diff --git a/packages/mantine-react-table/src/components/inputs/MRT_FilterCheckbox.tsx b/packages/mantine-react-table/src/components/inputs/MRT_FilterCheckbox.tsx index 7ad9787f5..58d6768bc 100644 --- a/packages/mantine-react-table/src/components/inputs/MRT_FilterCheckbox.tsx +++ b/packages/mantine-react-table/src/components/inputs/MRT_FilterCheckbox.tsx @@ -9,7 +9,8 @@ import { } from '../../types'; import { parseFromValuesOrFunc } from '../../utils/utils'; -interface Props extends CheckboxProps { +interface Props + extends CheckboxProps { column: MRT_Column; table: MRT_TableInstance; } diff --git a/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx b/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx index 4efcc5d38..b2c389ae1 100644 --- a/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx +++ b/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx @@ -41,7 +41,7 @@ export const MRT_ToolbarAlertBanner = ({ renderToolbarAlertBannerContent, rowCount, }, - refs: { lastSelectedRowId} + refs: { lastSelectedRowId }, } = table; const { density, grouping, rowSelection, showAlertBanner } = getState(); @@ -95,11 +95,12 @@ export const MRT_ToolbarAlertBanner = ({ className={classes['alert-badge']} rightSection={ table.getColumn(columnId).toggleGrouping()} size="xs" variant="subtle" > - + } variant="filled" @@ -152,11 +153,7 @@ export const MRT_ToolbarAlertBanner = ({ )} {alertProps?.children} - {alertProps?.children && (selectedAlert || groupedAlert) && ( -
- )} {selectedAlert} - {selectedAlert && groupedAlert &&
} {groupedAlert}
diff --git a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx index 0f0886934..94d3ab514 100644 --- a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx +++ b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx @@ -5,9 +5,7 @@ import { type MRT_RowData, type MRT_StatefulTableOptions, } from '../../types'; -import { - defaultDisplayColumnProps, -} from '../../utils/displayColumn.utils'; +import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils'; export const getMRT_RowDragColumnDef = ( tableOptions: MRT_StatefulTableOptions, diff --git a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx index 8020f7295..376c4425c 100644 --- a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx +++ b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx @@ -7,9 +7,7 @@ import { type MRT_RowData, type MRT_StatefulTableOptions, } from '../../types'; -import { - defaultDisplayColumnProps, -} from '../../utils/displayColumn.utils'; +import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils'; export const getMRT_RowExpandColumnDef = ( tableOptions: MRT_StatefulTableOptions, @@ -60,7 +58,7 @@ export const getMRT_RowExpandColumnDef = ( Header: enableExpandAll ? ({ table }) => { return ( - <> + {groupedColumnMode === 'remove' && grouping @@ -69,7 +67,7 @@ export const getMRT_RowExpandColumnDef = ( table.getColumn(groupedColumnId).columnDef.header, ) ?.join(', ')} - + ); } : undefined, diff --git a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx index 68a851e0c..ac4f52742 100644 --- a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx +++ b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx @@ -4,9 +4,7 @@ import { type MRT_RowData, type MRT_StatefulTableOptions, } from '../../types'; -import { - defaultDisplayColumnProps, -} from '../../utils/displayColumn.utils'; +import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils'; export const getMRT_RowPinningColumnDef = ( tableOptions: MRT_StatefulTableOptions, diff --git a/packages/mantine-react-table/stories/features/ColumnGrouping.stories.tsx b/packages/mantine-react-table/stories/features/ColumnGrouping.stories.tsx index c65d0c528..b398e1a3f 100644 --- a/packages/mantine-react-table/stories/features/ColumnGrouping.stories.tsx +++ b/packages/mantine-react-table/stories/features/ColumnGrouping.stories.tsx @@ -291,7 +291,6 @@ export const GroupingColumnsSetState = () => { columns={columns} data={data} enableGrouping - state={{ columnOrder: columns.map((c) => c.accessorKey as string) }} /> ); }; diff --git a/packages/mantine-react-table/stories/features/ColumnResizing.stories.tsx b/packages/mantine-react-table/stories/features/ColumnResizing.stories.tsx index a2373152e..630a57d19 100644 --- a/packages/mantine-react-table/stories/features/ColumnResizing.stories.tsx +++ b/packages/mantine-react-table/stories/features/ColumnResizing.stories.tsx @@ -1,3 +1,4 @@ +import { DirectionProvider } from '@mantine/core'; import { type MRT_ColumnDef, MantineReactTable } from '../../src'; import { faker } from '@faker-js/faker'; import { type Meta } from '@storybook/react'; @@ -50,14 +51,16 @@ export const ColumnResizingEnabledDefaultOnChange = () => ( ); export const ColumnResizingEnabledDefaultOnChangeRTL = () => ( -
- -
+ +
+ +
+
); export const ColumnResizingEnabledDefaultOnChangeGrid = () => ( @@ -94,15 +97,17 @@ export const ColumnResizingDefaultOnChangeGridWithIndividualShrink = () => ( ); export const ColumnResizingEnabledDefaultOnChangeGridRTL = () => ( -
- -
+ +
+ +
+
); export const ColumnResizingEnabledDefaultOnChangeSemantic = () => ( @@ -115,15 +120,17 @@ export const ColumnResizingEnabledDefaultOnChangeSemantic = () => ( ); export const ColumnResizingEnabledDefaultOnChangeSemanticRTL = () => ( -
- -
+ +
+ +
+
); export const ColumnResizingEnabledNoColumnActions = () => ( @@ -179,15 +186,17 @@ export const ColumnResizingEnabledOnEnd = () => ( ); export const ColumnResizingEnabledOnEndRTL = () => ( -
- -
+ +
+ +
+
); export const ColumnResizingCustomDefaultWidths = () => ( @@ -316,14 +325,16 @@ export const ColumnResizingLayoutGridGrow = () => ( ); export const ColumnResizingLayoutGridGrowRTL = () => ( -
- -
+ +
+ +
+
);