Skip to content

Commit

Permalink
release v2.9.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@KevinVandy
KevinVandy committed Jan 24, 2024
1 parent 1cfdea4 commit 7fbe53e
Show file tree
Hide file tree
Showing 22 changed files with 156 additions and 91 deletions.
15 changes: 13 additions & 2 deletions apps/material-react-table-docs/examples/advanced/sandbox/src/JS.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,14 @@ const Example = () => {
enableFacetedValues: true,
enableRowActions: true,
enableRowSelection: true,
initialState: { showColumnFilters: true, showGlobalFilter: true },
initialState: {
showColumnFilters: true,
showGlobalFilter: true,
columnPinning: {
left: ['mrt-row-expand', 'mrt-row-select'],
right: ['mrt-row-actions'],
},
},
paginationDisplayMode: 'pages',
positionToolbarAlertBanner: 'bottom',
muiSearchTextFieldProps: {
Expand All @@ -153,9 +160,13 @@ const Example = () => {
renderDetailPanel: ({ row }) => (
<Box
sx={{
alignItems: 'center',
display: 'flex',
justifyContent: 'space-around',
alignItems: 'center',
left: '30px',
maxWidth: '1000px',
position: 'sticky',
width: '100%',
}}
>
<img
Expand Down
10 changes: 9 additions & 1 deletion apps/material-react-table-docs/examples/advanced/sandbox/src/TS.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,10 @@ const Example = () => {
initialState: {
showColumnFilters: true,
showGlobalFilter: true,
columnPinning: {
left: ['mrt-row-expand', 'mrt-row-select'],
right: ['mrt-row-actions'],
},
},
paginationDisplayMode: 'pages',
positionToolbarAlertBanner: 'bottom',
Expand All @@ -169,9 +173,13 @@ const Example = () => {
renderDetailPanel: ({ row }) => (
<Box
sx={{
alignItems: 'center',
display: 'flex',
justifyContent: 'space-around',
alignItems: 'center',
left: '30px',
maxWidth: '1000px',
position: 'sticky',
width: '100%',
}}
>
<img
Expand Down
4 changes: 2 additions & 2 deletions apps/material-react-table-docs/pages/changelog.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ import Head from 'next/head';

### Version 2

#### Version 2.9.0 - Coming Soon
#### Version 2.9.0 - 2024-01-24

- Added new `renderCaption` table option to allow for a `<caption>` element to be rendered within the table
- Fixed row hover opacity styles for pinned columns and selected rows
- Fixed row hover opacity style issues for pinned columns and selected rows with `::before` and `::after` pseudo elements in pinned cells
- Standardized `data-index`, `data-pinned`, and `data-selected` attributes on body rows, head cells, body cells, and footer cells where applicable
- Column virtualization performance optimizations

Expand Down
1 change: 1 addition & 0 deletions apps/material-react-table-docs/pages/migrating-to-v2.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ This should be an easy to moderate upgrade for most developers. The only breakin
10. Improved column sizing and layout modes for column resizing features
11. All internal MRT components are now exported for custom headless use cases
12. New optional `createMRTColumnHelper` utility function for better `TValue`/`cell.getValue()` type inference
13. Many more features are compatible with virtualization

See the full [changelog](/changelog#version-2.0.0---10-27-2023) for more details.

Expand Down
2 changes: 1 addition & 1 deletion packages/material-react-table/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "2.8.0",
"version": "2.9.0",
"license": "MIT",
"name": "material-react-table",
"description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
Expand Down
1 change: 0 additions & 1 deletion packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,6 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
zIndex:
draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
...getCommonMRTCellStyles({
cell,
column,
table,
tableCellProps,
Expand Down
67 changes: 41 additions & 26 deletions packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,12 @@ import {
type MRT_TableInstance,
type MRT_VirtualItem,
} from '../../types';
import { getMRTTheme } from '../../utils/style.utils';
import { getIsRowSelected } from '../../utils/row.utils';
import {
getCommonPinnedCellStyles,
getMRTTheme,
pinnedBeforeAfterStyles,
} from '../../utils/style.utils';
import { parseFromValuesOrFunc } from '../../utils/utils';

interface Props<TData extends MRT_RowData> {
Expand Down Expand Up @@ -77,7 +82,8 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
columnVirtualizer ?? {};

const isPinned = enableRowPinning && row.getIsPinned();
const isRowSelected = getIsRowSelected({ row, table });
const isRowPinned = enableRowPinning && row.getIsPinned();
const isDraggingRow = draggingRow?.id === row.id;
const isHoveredRow = hoveredRow?.id === row.id;

Expand Down Expand Up @@ -133,24 +139,35 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
selectedRowBackgroundColor,
} = getMRTTheme(table, theme);

const cellHighlightColor = isRowSelected
? selectedRowBackgroundColor
: isRowPinned
? pinnedRowBackgroundColor
: undefined;

const cellHighlightColorHover =
tableRowProps?.hover !== false
? isRowSelected
? cellHighlightColor
: theme.palette.mode === 'dark'
? `${lighten(baseBackgroundColor, 0.3)}`
: `${darken(baseBackgroundColor, 0.3)}`
: undefined;

return (
<>
<TableRow
data-index={renderDetailPanel ? staticRowIndex * 2 : staticRowIndex}
data-pinned={!!isPinned || undefined}
data-selected={
row?.getIsSelected() ||
(row.getCanSelectSubRows() && row?.getIsAllSubRowsSelected()) ||
undefined
}
data-pinned={!!isRowPinned || undefined}
data-selected={isRowSelected || undefined}
onDragEnter={handleDragEnter}
ref={(node: HTMLTableRowElement) => {
if (node) {
rowRef.current = node;
rowVirtualizer?.measureElement(node);
}
}}
selected={row.getIsSelected()}
selected={isRowSelected}
{...tableRowProps}
style={{
transform: virtualRow
Expand All @@ -160,41 +177,39 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
}}
sx={(theme: Theme) => ({
'&:hover td': {
backgroundColor:
tableRowProps?.hover !== false
? row.getIsSelected()
? `${alpha(selectedRowBackgroundColor, 0.3)}`
: theme.palette.mode === 'dark'
? `${lighten(baseBackgroundColor, 0.05)}`
: `${darken(baseBackgroundColor, 0.05)}`
'&:after': {
backgroundColor: cellHighlightColorHover
? alpha(cellHighlightColorHover, 0.3)
: undefined,
...pinnedBeforeAfterStyles,
},
},
backgroundColor: `${baseBackgroundColor} !important`,
bottom:
!virtualRow && bottomPinnedIndex !== undefined && isPinned
!virtualRow && bottomPinnedIndex !== undefined && isRowPinned
? `${
bottomPinnedIndex * rowHeight +
(enableStickyFooter ? tableFooterHeight - 1 : 0)
}px`
: undefined,
boxSizing: 'border-box',
display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
opacity: isPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1,
opacity: isRowPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1,
position: virtualRow
? 'absolute'
: rowPinningDisplayMode?.includes('sticky') && isPinned
: rowPinningDisplayMode?.includes('sticky') && isRowPinned
? 'sticky'
: undefined,
td: {
backgroundColor: row.getIsSelected()
? selectedRowBackgroundColor
: isPinned
? pinnedRowBackgroundColor
: undefined,
'&:after': {
backgroundColor: cellHighlightColor,
...pinnedBeforeAfterStyles,
},
...getCommonPinnedCellStyles({ table, theme }),
},
top: virtualRow
? 0
: topPinnedIndex !== undefined && isPinned
: topPinnedIndex !== undefined && isRowPinned
? `${
topPinnedIndex * rowHeight +
(enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
Expand All @@ -203,7 +218,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
width: '100%',
zIndex:
rowPinningDisplayMode?.includes('sticky') && isPinned
rowPinningDisplayMode?.includes('sticky') && isRowPinned
? 2
: undefined,
...(sx as any),
Expand Down
10 changes: 4 additions & 6 deletions packages/material-react-table/src/components/inputs/MRT_SelectCheckbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,18 @@ import {
type MRT_RowData,
type MRT_TableInstance,
} from '../../types';
import { getIsRowSelected } from '../../utils/row.utils';
import { getCommonTooltipProps } from '../../utils/style.utils';
import { parseFromValuesOrFunc } from '../../utils/utils';

interface Props<TData extends MRT_RowData> extends CheckboxProps {
row?: MRT_Row<TData>;
selectAll?: boolean;
staticRowIndex?: number;
table: MRT_TableInstance<TData>;
}

export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
row,
selectAll,
staticRowIndex,
table,
...rest
Expand All @@ -39,6 +38,8 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
} = table;
const { density, isLoading } = getState();

const selectAll = !row;

const checkboxProps = {
...(!row
? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
Expand Down Expand Up @@ -92,10 +93,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
'aria-label': selectAll
? localization.toggleSelectAll
: localization.toggleSelectRow,
checked: selectAll
? allRowsSelected
: row?.getIsSelected() ||
(row?.getIsAllSubRowsSelected() && row.getCanSelectSubRows()),
checked: selectAll ? allRowsSelected : getIsRowSelected({ row, table }),
disabled:
isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
inputProps: {
Expand Down
2 changes: 1 addition & 1 deletion packages/material-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
{enableRowSelection &&
enableSelectAll &&
positionToolbarAlertBanner === 'head-overlay' && (
<MRT_SelectCheckbox selectAll table={table} />
<MRT_SelectCheckbox table={table} />
)}{' '}
{selectedAlert}
</Box>
Expand Down
1 change: 1 addition & 0 deletions packages/material-react-table/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
...defaultDisplayColumnProps({
header: 'actions',
id: 'mrt-row-actions',
size: 70,
tableOptions,
}),
};
Expand Down
1 change: 1 addition & 0 deletions packages/material-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
...defaultDisplayColumnProps({
header: 'move',
id: 'mrt-row-drag',
size: 60,
tableOptions,
}),
};
Expand Down
6 changes: 4 additions & 2 deletions packages/material-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,11 @@ export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
id: 'mrt-row-expand',
size:
groupedColumnMode === 'remove'
? defaultColumn?.size
? defaultColumn?.size ?? 180
: renderDetailPanel
? 60
? enableExpandAll
? 60
: 70
: 100,
tableOptions,
}),
Expand Down
1 change: 1 addition & 0 deletions packages/material-react-table/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
...defaultDisplayColumnProps({
header: 'rowNumbers',
id: 'mrt-row-numbers',
size: 50,
tableOptions,
}),
};
Expand Down
1 change: 1 addition & 0 deletions packages/material-react-table/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
...defaultDisplayColumnProps({
header: 'pin',
id: 'mrt-row-pin',
size: 60,
tableOptions,
}),
};
Expand Down
3 changes: 2 additions & 1 deletion packages/material-react-table/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,13 @@ export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
),
Header:
enableSelectAll && enableMultiRowSelection
? ({ table }) => <MRT_SelectCheckbox selectAll table={table} />
? ({ table }) => <MRT_SelectCheckbox table={table} />
: undefined,
grow: false,
...defaultDisplayColumnProps({
header: 'select',
id: 'mrt-row-select',
size: enableSelectAll ? 60 : 70,
tableOptions,
}),
};
Expand Down
4 changes: 2 additions & 2 deletions packages/material-react-table/src/utils/displayColumn.utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ import { getAllLeafColumnDefs, getColumnId } from './column.utils';
export function defaultDisplayColumnProps<TData extends MRT_RowData>({
header,
id,
size = 60,
size,
tableOptions,
}: {
header?: keyof MRT_Localization;
id: MRT_DisplayColumnIds;
size?: number;
size: number;
tableOptions: MRT_DefinedTableOptions<TData>;
}) {
const { defaultDisplayColumn, displayColumnDefOptions, localization } =
Expand Down
23 changes: 22 additions & 1 deletion packages/material-react-table/src/utils/row.utils.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,25 @@
import { type MRT_RowData, type MRT_TableInstance } from '../types';
import {
type MRT_Row,
type MRT_RowData,
type MRT_TableInstance,
} from '../types';
import { parseFromValuesOrFunc } from './utils';

export const getIsRowSelected = <TData extends MRT_RowData>({
row,
table,
}: {
row: MRT_Row<TData>;
table: MRT_TableInstance<TData>;
}) => {
const { options: enableRowSelection } = table;
return (
row.getIsSelected() ||
(parseFromValuesOrFunc(enableRowSelection, row) &&
row.getCanSelectSubRows() &&
row.getIsAllSubRowsSelected())
);
};

export const getCanRankRows = <TData extends MRT_RowData>(
table: MRT_TableInstance<TData>,
Expand Down
Loading

2 comments on commit 7fbe53e

@vercel
Copy link

@vercel vercel bot commented on 7fbe53e Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

material-react-table-storybook – ./

www.material-react-table.dev
material-react-table-storybook-git-v2-kevinvandy-s-team.vercel.app
material-react-table-storybook-kevinvandy-s-team.vercel.app
material-react-table-storybook.vercel.app
material-react-table.dev

@vercel
Copy link

@vercel vercel bot commented on 7fbe53e Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

material-react-table – ./apps/material-react-table-docs

material-react-table-kevinvandy-s-team.vercel.app
material-react-table.vercel.app
material-react-table.com
material-react-table-git-v2-kevinvandy-s-team.vercel.app
v2.material-react-table.com
www.material-react-table.com

Please sign in to comment.