Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adjust datatable last column #2307

Merged
merged 10 commits into from
Aug 7, 2024
Merged

Adjust datatable last column #2307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6ee0a40
fix: fixed the column resizing
jordankoschei-okta Jul 25, 2024
66710eb
fix: update active color of resize handle
jordankoschei-okta Jul 25, 2024
8391a2e
Merge branch 'main' into jk-datatable-last-column
jordankoschei-okta Aug 6, 2024
d2c2f57
fix: add waitBeforeCapture to applitools
jordankoschei-okta Aug 6, 2024
18967e8
Merge branch 'main' into jk-datatable-last-column
jordankoschei-okta Aug 6, 2024
f44066b
Update packages/odyssey-react-mui/src/DataTable/DataTable.tsx
jordankoschei-okta Aug 6, 2024
cb48734
fix: remove unnecessary TEST comment
jordankoschei-okta Aug 6, 2024
ce4e406
fix: update const name
jordankoschei-okta Aug 6, 2024
f56a856
Merge branch 'main' into jk-datatable-last-column
jordankoschei-okta Aug 7, 2024
cd62305
fix: address linter error
jordankoschei-okta Aug 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions packages/odyssey-react-mui/src/DataTable/DataTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -584,6 +584,16 @@ const DataTable = ({
[columnIds],
) as string[];

const shouldDisplayRowActions = useMemo(
() =>
(hasRowReordering === true && onReorderRows) ||
rowActionButtons ||
rowActionMenuItems
? true
: false,
[hasRowReordering, onReorderRows, rowActionButtons, rowActionMenuItems],
);
jordankoschei-okta marked this conversation as resolved.
Show resolved Hide resolved

const dataTable = useMaterialReactTable({
columns: columns,
data: data,
Expand Down Expand Up @@ -723,12 +733,7 @@ const DataTable = ({
}),

// Row actions
enableRowActions:
(hasRowReordering === true && onReorderRows) ||
rowActionButtons ||
rowActionMenuItems
? true
: false,
enableRowActions: shouldDisplayRowActions,
positionActionsColumn:
"last" as MRT_TableOptions<DataTableRowData>["positionActionsColumn"],
renderRowActions: ({ row }) => renderRowActions({ row }),
Expand Down Expand Up @@ -763,6 +768,10 @@ const DataTable = ({
// Refs
muiTableProps: {
ref: tableContentRef,
className:
!shouldDisplayRowActions && hasColumnResizing
? "ods-hide-spacer-column"
: "",
},

muiTableContainerProps: {
Expand Down
26 changes: 20 additions & 6 deletions packages/odyssey-react-mui/src/labs/DataComponents/TableContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,21 @@ const TableContent = ({
[innerWidthStyle, emptyState],
);

const shouldDisplayRowActions = useMemo(
() =>
(hasRowReordering === true && onReorderRows) ||
tableOptions.rowActionButtons ||
tableOptions.rowActionMenuItems
? true
: false,
[
hasRowReordering,
onReorderRows,
tableOptions.rowActionButtons,
tableOptions.rowActionMenuItems,
],
);

const dataTable = useMaterialReactTable({
data: !isEmpty && !isNoResults ? data : [],
columns,
Expand Down Expand Up @@ -329,6 +344,10 @@ const TableContent = ({
},
muiTableProps: {
ref: tableContentRef,
className:
!shouldDisplayRowActions && tableOptions.hasColumnResizing
? "ods-hide-spacer-column"
: "",
},
muiTableContainerProps: {
ref: tableInnerContainerRef,
Expand All @@ -340,12 +359,7 @@ const TableContent = ({
defaultColumn: {
Cell: defaultCell,
},
enableRowActions:
(hasRowReordering === true && onReorderRows) ||
tableOptions.rowActionButtons ||
tableOptions.rowActionMenuItems
? true
: false,
enableRowActions: shouldDisplayRowActions,
renderRowActions: ({ row }) => renderRowActions({ row }),
enableRowOrdering: hasRowReordering && Boolean(onReorderRows),
enableRowDragging: hasRowReordering && Boolean(onReorderRows),
Expand Down
27 changes: 23 additions & 4 deletions packages/odyssey-react-mui/src/theme/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2566,10 +2566,6 @@ export const components = ({
borderLeft: `none !important`,
},

["&::after"]: {
background: "transparent !important",
},

[`.${tableBodyClasses.root} &.${tableCellClasses.root}`]: {
borderRight: `none !important`,
},
Expand Down Expand Up @@ -2633,7 +2629,25 @@ export const components = ({
flexGrow: 0,
width: odysseyTokens.Spacing2,
},
[`.ods-hide-spacer-column .${tableHeadClasses.root} &:last-of-type, .ods-hide-spacer-column .${tableBodyClasses.root} &:last-of-type`]:
{
display: "none",
},

[`.ods-hide-spacer-column .${tableHeadClasses.root} &:nth-last-of-type(2), .ods-hide-spacer-column .${tableBodyClasses.root} &:nth-last-of-type(2)`]:
{
borderTopRightRadius: odysseyTokens.Spacing2,
borderBottomRightRadius: odysseyTokens.Spacing2,
flexGrow: 1,

[`& .Mui-TableHeadCell-ResizeHandle-Wrapper`]: {
display: "none",
},
},

[`&::after`]: {
display: "none",
},
...(ownerState.variant === "number" && {
textAlign: "end",
fontFeatureSettings: '"lnum", "tnum"',
Expand Down Expand Up @@ -2672,6 +2686,11 @@ export const components = ({

[`& .Mui-TableHeadCell-ResizeHandle-Wrapper`]: {
marginInlineEnd: `-${odysseyTokens.Spacing3}`,

[`&:active .${dividerClasses.vertical}`]: {
borderColor: odysseyTokens.HueNeutral400,
opacity: 1,
},
},

[`& .Mui-TableHeadCell-Content-Wrapper`]: {
Expand Down