From 627fbc5b778400aadef0cb6f73655939d6f99339 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Tue, 23 Jan 2024 18:35:28 -0600 Subject: [PATCH] progress on pinned selection bug --- .../examples/advanced/sandbox/src/TS.tsx | 2 + packages/material-react-table/package.json | 8 +- .../material-react-table/rollup.config.mjs | 10 +- .../src/components/body/MRT_TableBodyCell.tsx | 1 + .../src/utils/style.utils.ts | 79 ++++++++----- pnpm-lock.yaml | 108 ++++++++++++++++++ 6 files changed, 176 insertions(+), 32 deletions(-) diff --git a/apps/material-react-table-docs/examples/advanced/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/advanced/sandbox/src/TS.tsx index 3862baecd..c319a79c2 100644 --- a/apps/material-react-table-docs/examples/advanced/sandbox/src/TS.tsx +++ b/apps/material-react-table-docs/examples/advanced/sandbox/src/TS.tsx @@ -153,6 +153,8 @@ const Example = () => { initialState: { showColumnFilters: true, showGlobalFilter: true, + columnPinning: { left: ['email'], right: ['jobTitle'] }, + rowSelection: { 1: true }, }, paginationDisplayMode: 'pages', positionToolbarAlertBanner: 'bottom', diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json index 04a57f821..aef4cedb4 100644 --- a/packages/material-react-table/package.json +++ b/packages/material-react-table/package.json @@ -50,8 +50,8 @@ "build-locales": "pnpm lib:build-locales", "build-lib": "pnpm lib:build-lib", "dev": "pnpm lib:dev", - "lib:build": "rm -rf dist && pnpm build-lib && pnpm build-locales && rm -rf dist/types", - "lib:build-locales": "rm -rf locales && node build-locales.mjs", + "lib:build": "pnpm build-lib && pnpm build-locales", + "lib:build-locales": "node build-locales.mjs", "lib:build-lib": "rm -rf dist && rollup -c rollup.config.mjs && size-limit", "lib:dev": "rollup -c rollup.config.mjs --watch", "lint": "eslint .", @@ -94,6 +94,8 @@ "react-dom": "^18.2.0", "react-is": "^18.2.0", "rollup": "^2.79.1", + "rollup-plugin-copy": "^3.5.0", + "rollup-plugin-delete": "^2.0.0", "rollup-plugin-dts": "^6.1.0", "rollup-plugin-peer-deps-external": "^2.2.4", "size-limit": "^11.0.2", @@ -118,4 +120,4 @@ "@tanstack/react-virtual": "3.0.2", "highlight-words": "1.2.2" } -} \ No newline at end of file +} \ No newline at end of file diff --git a/packages/material-react-table/rollup.config.mjs b/packages/material-react-table/rollup.config.mjs index 0df8a3467..3f08a9247 100644 --- a/packages/material-react-table/rollup.config.mjs +++ b/packages/material-react-table/rollup.config.mjs @@ -1,5 +1,7 @@ import pkg from './package.json' assert { type: 'json' }; import typescript from '@rollup/plugin-typescript'; +import copy from 'rollup-plugin-copy'; +import del from 'rollup-plugin-delete'; import dts from 'rollup-plugin-dts'; import external from 'rollup-plugin-peer-deps-external'; @@ -38,6 +40,12 @@ export default [ { input: './dist/types/index.d.ts', output: [{ file: `./${pkg.typings}`, format: 'esm' }], - plugins: [dts()], + plugins: [ + del({ + hook: 'buildEnd', + targets: ['dist/types'], + }), + dts(), + ], }, ]; diff --git a/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx index c4c4139f7..e630dddb8 100644 --- a/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx +++ b/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx @@ -263,6 +263,7 @@ export const MRT_TableBodyCell = ({ zIndex: draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0, ...getCommonMRTCellStyles({ + cell, column, table, tableCellProps, diff --git a/packages/material-react-table/src/utils/style.utils.ts b/packages/material-react-table/src/utils/style.utils.ts index eda81a95a..f0db14238 100644 --- a/packages/material-react-table/src/utils/style.utils.ts +++ b/packages/material-react-table/src/utils/style.utils.ts @@ -4,6 +4,7 @@ import { type TooltipProps } from '@mui/material/Tooltip'; import { alpha, darken, lighten } from '@mui/material/styles'; import { type Theme } from '@mui/material/styles'; import { + type MRT_Cell, type MRT_Column, type MRT_Header, type MRT_RowData, @@ -42,26 +43,46 @@ export const getMRTTheme = ( }; }; +const pinnedBeforeAfterStyles = { + content: '""', + height: '100%', + left: 0, + position: 'absolute', + top: 0, + width: '100%', + zIndex: -1, +}; + export const getCommonMRTCellStyles = ({ + cell, column, header, table, tableCellProps, theme, }: { + cell?: MRT_Cell; column: MRT_Column; header?: MRT_Header; table: MRT_TableInstance; tableCellProps: TableCellProps; theme: Theme; }) => { - const { baseBackgroundColor } = getMRTTheme(table, theme); + const { + baseBackgroundColor, + pinnedRowBackgroundColor, + selectedRowBackgroundColor, + } = getMRTTheme(table, theme); const { options: { enableColumnVirtualization, layoutMode }, } = table; const { columnDef } = column; + const { row } = cell ?? {}; - const isPinned = columnDef.columnDefType !== 'group' && column.getIsPinned(); + const isColumnPinned = + columnDef.columnDefType !== 'group' && column.getIsPinned(); + const isRowPinned = row?.getIsPinned(); + const isRowSelected = row?.getIsSelected(); const widthStyles: CSSProperties = { minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId( @@ -84,40 +105,42 @@ export const getCommonMRTCellStyles = ({ widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`; } - const pinnedStyles = isPinned + const pinnedStyles = isColumnPinned ? { - '&[data-pinned="true"]': { - '&:before': { - backgroundColor: 'transparent', - content: '""', - height: '100%', - left: 0, - position: 'absolute', - top: 0, - width: '100%', - }, + '&:after': { + backgroundColor: isRowSelected + ? selectedRowBackgroundColor + : isRowPinned + ? pinnedRowBackgroundColor + : undefined, + ...pinnedBeforeAfterStyles, + }, + '&:before': { backgroundColor: alpha( darken( baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01, ), - 0.97, + 0.9, ), - boxShadow: getIsLastLeftPinnedColumn(table, column) - ? `-4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset` - : getIsFirstRightPinnedColumn(column) - ? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset` - : undefined, - left: - isPinned === 'left' ? `${column.getStart('left')}px` : undefined, - opacity: 0.98, - position: 'sticky', - right: - isPinned === 'right' - ? `${getTotalRight(table, column)}px` - : undefined, - zIndex: 1, + ...pinnedBeforeAfterStyles, }, + boxShadow: getIsLastLeftPinnedColumn(table, column) + ? `-4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset` + : getIsFirstRightPinnedColumn(column) + ? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset` + : undefined, + left: + isColumnPinned === 'left' + ? `${column.getStart('left')}px` + : undefined, + opacity: 0.98, + position: 'sticky', + right: + isColumnPinned === 'right' + ? `${getTotalRight(table, column)}px` + : undefined, + zIndex: 1, } : {}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fd9af1640..f58980d24 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -408,6 +408,12 @@ importers: rollup: specifier: ^2.79.1 version: 2.79.1 + rollup-plugin-copy: + specifier: ^3.5.0 + version: 3.5.0 + rollup-plugin-delete: + specifier: ^2.0.0 + version: 2.0.0 rollup-plugin-dts: specifier: ^6.1.0 version: 6.1.0(rollup@2.79.1)(typescript@5.3.3) @@ -6305,6 +6311,12 @@ packages: resolution: {integrity: sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==} dev: true + /@types/fs-extra@8.1.5: + resolution: {integrity: sha512-0dzKcwO+S8s2kuF5Z9oUWatQJj5Uq/iqphEtE3GQJVRRYm/tD1LglU2UnXi2A8jLq5umkGouOXOR9y0n613ZwQ==} + dependencies: + '@types/node': 20.11.5 + dev: true + /@types/glob@7.2.0: resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==} dependencies: @@ -8120,6 +8132,10 @@ packages: resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==} dev: false + /colorette@1.4.0: + resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==} + dev: true + /colorette@2.0.20: resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==} dev: false @@ -8739,6 +8755,20 @@ packages: resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==} dev: true + /del@5.1.0: + resolution: {integrity: sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==} + engines: {node: '>=8'} + dependencies: + globby: 10.0.2 + graceful-fs: 4.2.11 + is-glob: 4.0.3 + is-path-cwd: 2.2.0 + is-path-inside: 3.0.3 + p-map: 3.0.0 + rimraf: 3.0.2 + slash: 3.0.0 + dev: true + /del@6.1.1: resolution: {integrity: sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==} engines: {node: '>=10'} @@ -10467,6 +10497,15 @@ packages: universalify: 2.0.1 dev: true + /fs-extra@8.1.0: + resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==} + engines: {node: '>=6 <7 || >=8'} + dependencies: + graceful-fs: 4.2.11 + jsonfile: 4.0.0 + universalify: 0.1.2 + dev: true + /fs-extra@9.1.0: resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==} engines: {node: '>=10'} @@ -10682,6 +10721,34 @@ packages: dependencies: define-properties: 1.2.1 + /globby@10.0.1: + resolution: {integrity: sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==} + engines: {node: '>=8'} + dependencies: + '@types/glob': 7.2.0 + array-union: 2.1.0 + dir-glob: 3.0.1 + fast-glob: 3.3.2 + glob: 7.2.3 + ignore: 5.3.0 + merge2: 1.4.1 + slash: 3.0.0 + dev: true + + /globby@10.0.2: + resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==} + engines: {node: '>=8'} + dependencies: + '@types/glob': 7.2.0 + array-union: 2.1.0 + dir-glob: 3.0.1 + fast-glob: 3.3.2 + glob: 7.2.3 + ignore: 5.3.0 + merge2: 1.4.1 + slash: 3.0.0 + dev: true + /globby@11.1.0: resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} engines: {node: '>=10'} @@ -11392,6 +11459,11 @@ packages: isobject: 3.0.1 dev: true + /is-plain-object@3.0.1: + resolution: {integrity: sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==} + engines: {node: '>=0.10.0'} + dev: true + /is-plain-object@5.0.0: resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==} engines: {node: '>=0.10.0'} @@ -12323,6 +12395,12 @@ packages: resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==} dev: true + /jsonfile@4.0.0: + resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==} + optionalDependencies: + graceful-fs: 4.2.11 + dev: true + /jsonfile@6.1.0: resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==} dependencies: @@ -14106,6 +14184,13 @@ packages: dependencies: p-limit: 3.1.0 + /p-map@3.0.0: + resolution: {integrity: sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==} + engines: {node: '>=8'} + dependencies: + aggregate-error: 3.1.0 + dev: true + /p-map@4.0.0: resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==} engines: {node: '>=10'} @@ -16100,6 +16185,24 @@ packages: dependencies: glob: 7.2.3 + /rollup-plugin-copy@3.5.0: + resolution: {integrity: sha512-wI8D5dvYovRMx/YYKtUNt3Yxaw4ORC9xo6Gt9t22kveWz1enG9QrhVlagzwrxSC455xD1dHMKhIJkbsQ7d48BA==} + engines: {node: '>=8.3'} + dependencies: + '@types/fs-extra': 8.1.5 + colorette: 1.4.0 + fs-extra: 8.1.0 + globby: 10.0.1 + is-plain-object: 3.0.1 + dev: true + + /rollup-plugin-delete@2.0.0: + resolution: {integrity: sha512-/VpLMtDy+8wwRlDANuYmDa9ss/knGsAgrDhM+tEwB1npHwNu4DYNmDfUL55csse/GHs9Q+SMT/rw9uiaZ3pnzA==} + engines: {node: '>=10'} + dependencies: + del: 5.1.0 + dev: true + /rollup-plugin-dts@6.1.0(rollup@2.79.1)(typescript@5.3.3): resolution: {integrity: sha512-ijSCPICkRMDKDLBK9torss07+8dl9UpY9z1N/zTeA1cIqdzMlpkV3MOOC7zukyvQfDyxa1s3Dl2+DeiP/G6DOw==} engines: {node: '>=16'} @@ -17672,6 +17775,11 @@ packages: unist-util-visit-parents: 6.0.1 dev: false + /universalify@0.1.2: + resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==} + engines: {node: '>= 4.0.0'} + dev: true + /universalify@0.2.0: resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==} engines: {node: '>= 4.0.0'}