Skip to content

Datagrid improvements #2174

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

Merged
Jialecl merged 4 commits into from
Apr 1, 2025
Merged

Datagrid improvements #2174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3e4a683
Fixed problem with empty selectable datagrid
Feb 26, 2025
f90a47e
Added improvement to disable interaction with rows with an invalid un…
Feb 26, 2025
63d9d47
Added inline return
Mar 10, 2025
b9ed7ce
Merge branch 'master' into Mil4n0r/datagrid-fixes
Jialecl Apr 1, 2025
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
152 changes: 152 additions & 0 deletions packages/lib/src/data-grid/DataGrid.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -721,6 +721,17 @@ const DataGrid = () => {
<DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="id" />
</DxcContainer>
</ExampleContainer>
<ExampleContainer>
<Title title="Empty Data Grid" theme="light" level={4} />
<DxcDataGrid
columns={columns}
rows={[]}
uniqueRowId="id"
selectable
selectedRows={selectedChildRows}
onSelectRows={setSelectedChildRows}
/>
</ExampleContainer>
<ExampleContainer>
<Title title="Controlled Rows" theme="light" level={4} />
<DxcDataGrid
Expand Down Expand Up @@ -922,6 +933,143 @@ const DataGridSortedExpandable = () => {
);
};

const DataGridUnknownUniqueRowId = () => {
const [selectedRows, setSelectedRows] = useState((): Set<number | string> => new Set());
const [selectedChildRows, setSelectedChildRows] = useState((): Set<number | string> => new Set());

const [itemsPerPage, setItemsPerPage] = useState(5);
const [rowsControlled, setRowsControlled] = useState(expandableRows.slice(0, itemsPerPage));
const [page, setPage] = useState(0);

return (
<>
<ExampleContainer>
<Title title="Default" theme="light" level={4} />
<DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="error" />
</ExampleContainer>
<ExampleContainer>
<Title title="Expandable" theme="light" level={4} />
<DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="error" expandable />
</ExampleContainer>
<ExampleContainer>
<Title title="Selectable" theme="light" level={4} />
<DxcDataGrid
columns={columns}
rows={expandableRows}
uniqueRowId="error"
selectable
selectedRows={selectedRows}
onSelectRows={setSelectedRows}
/>
</ExampleContainer>
<ExampleContainer>
<Title title="Selectable & expandable" theme="light" level={4} />
<DxcDataGrid
columns={columns}
rows={expandableRows}
uniqueRowId="error"
expandable
selectable
selectedRows={selectedRows}
onSelectRows={setSelectedRows}
/>
</ExampleContainer>
<ExampleContainer>
<Title title="DataGrid with children" theme="light" level={4} />
<DxcDataGrid columns={childcolumns} rows={childRows} uniqueRowId="error" />
</ExampleContainer>
<ExampleContainer>
<Title title="DataGrid with children" theme="light" level={4} />
<DxcDataGrid
columns={childcolumns}
rows={childRows}
uniqueRowId="error"
selectable
selectedRows={selectedChildRows}
onSelectRows={setSelectedChildRows}
/>
</ExampleContainer>
<ExampleContainer>
<Title title="Summary row" theme="light" level={4} />
<DxcDataGrid
columns={columns}
rows={expandableRows}
summaryRow={{ label: "Total", total: 100 }}
uniqueRowId="error"
/>
</ExampleContainer>
<ExampleContainer>
<Title title="Scrollable Data Grid" theme="light" level={4} />
<DxcContainer height="250px">
<DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="error" />
</DxcContainer>
</ExampleContainer>
<ExampleContainer>
<Title title="Empty Data Grid" theme="light" level={4} />
<DxcDataGrid
columns={columns}
rows={[]}
uniqueRowId="error"
selectable
selectedRows={selectedChildRows}
onSelectRows={setSelectedChildRows}
/>
</ExampleContainer>
<ExampleContainer>
<Title title="Controlled Rows" theme="light" level={4} />
<DxcDataGrid
columns={columns}
rows={rowsControlled}
uniqueRowId="error"
showPaginator
onSort={(sortColumn) => {
if (sortColumn) {
const { columnKey, direction } = sortColumn;
console.log(`Sorting the column '${columnKey}' by '${direction}' direction`);
setRowsControlled((currentRows) => {
return currentRows.sort((a, b) => {
if (isKeyOfRow(columnKey, a) && isKeyOfRow(columnKey, b)) {
const valueA = a[columnKey];
const valueB = b[columnKey];
if (valueA != null && valueB != null) {
if (direction === "ASC") {
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
} else {
return valueA < valueB ? 1 : valueA > valueB ? -1 : 0;
}
} else {
return 0;
}
} else {
return 0;
}
});
});
} else {
console.log("Removed sorting criteria");
setRowsControlled(expandableRows.slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage));
}
}}
onPageChange={(page) => {
const internalPage = page - 1;
setPage(internalPage);
setRowsControlled(
expandableRows.slice(internalPage * itemsPerPage, internalPage * itemsPerPage + itemsPerPage)
);
}}
itemsPerPage={itemsPerPage}
itemsPerPageOptions={[5, 10]}
itemsPerPageFunction={(n) => {
setItemsPerPage(n);
setRowsControlled(expandableRows.slice(0, n));
}}
totalItems={expandableRows.length}
/>
</ExampleContainer>
</>
);
};

type Story = StoryObj<typeof DxcDataGrid>;

export const Chromatic: Story = {
Expand Down Expand Up @@ -991,3 +1139,7 @@ export const DataGridSortedExpanded: Story = {
button37 && (await userEvent.click(button37));
},
};

export const UnknownUniqueId: Story = {
render: DataGridUnknownUniqueRowId,
};
42 changes: 23 additions & 19 deletions packages/lib/src/data-grid/DataGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,26 +197,30 @@ const DxcDataGrid = ({
const sortedRows = useMemo((): readonly GridRow[] | HierarchyGridRow[] | ExpandableGridRow[] => {
const sortFunctions = getCustomSortFn(columns);
if (!onSort) {
if (expandable && sortColumns.length > 0) {
const innerSortedRows = sortRows(
rowsToRender.filter((row) => !row.isExpandedChildContent),
sortColumns,
sortFunctions
);
rowsToRender
.filter((row) => row.isExpandedChildContent)
.map((expandedRow) =>
addRow(
innerSortedRows,
innerSortedRows.findIndex((trigger) => rowKeyGetter(trigger, uniqueRowId) === expandedRow.triggerRowKey) +
1,
expandedRow
)
if (sortColumns.length > 0 && uniqueRowId) {
if (expandable) {
const innerSortedRows = sortRows(
rowsToRender.filter((row) => !row.isExpandedChildContent),
sortColumns,
sortFunctions
);
return innerSortedRows;
}
if (!expandable && sortColumns.length > 0 && uniqueRowId) {
return sortHierarchyRows(rowsToRender, sortColumns, sortFunctions, uniqueRowId);
if (innerSortedRows.some((row) => uniqueRowId in row)) {
rowsToRender
.filter((row) => row.isExpandedChildContent)
.map((expandedRow) =>
addRow(
innerSortedRows,
innerSortedRows.findIndex(
(trigger) => rowKeyGetter(trigger, uniqueRowId) === expandedRow.triggerRowKey
) + 1,
expandedRow
)
);
return innerSortedRows;
}
} else {
return sortHierarchyRows(rowsToRender, sortColumns, sortFunctions, uniqueRowId);
}
}
}
return rowsToRender;
Expand Down
13 changes: 10 additions & 3 deletions packages/lib/src/data-grid/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ export const renderExpandableTrigger = (
});
}
}}
disabled={!rows.some((row) => uniqueRowId in row)}
/>
);

Expand All @@ -143,6 +144,7 @@ export const renderHierarchyTrigger = (
) => (
<button
type="button"
disabled={!rows.some((row) => uniqueRowId in row)}
onClick={() => {
let newRowsToRender = [...rows];
if (!triggerRow.visibleChildren) {
Expand Down Expand Up @@ -223,6 +225,7 @@ export const renderCheckbox = (
}
onSelectRows(selected);
}}
disabled={!rows.some((row) => uniqueRowId in row)}
/>
);

Expand All @@ -244,7 +247,7 @@ export const renderHeaderCheckbox = (
) => (
<HalstackProvider advancedTheme={overwriteTheme(colorsTheme)}>
<DxcCheckbox
checked={!rows.some((row) => !selectedRows.has(rowKeyGetter(row, uniqueRowId)))}
checked={rows.length > 0 && !rows.some((row) => !selectedRows.has(rowKeyGetter(row, uniqueRowId)))}
onChange={(checked) => {
const updatedSelection = new Set(selectedRows);

Expand All @@ -266,6 +269,7 @@ export const renderHeaderCheckbox = (

onSelectRows(updatedSelection);
}}
disabled={rows.length === 0 || !rows.some((row) => uniqueRowId in row)}
/>
</HalstackProvider>
);
Expand Down Expand Up @@ -384,7 +388,7 @@ export const sortHierarchyRows = (
);
// add children directly under the parent if it is available
while (sortedChildren.length) {
if (uniqueRowId) {
if (uniqueRowId && sortedChildren.some((row) => uniqueRowId in row)) {
sortedChildren = sortedChildren.reduce(
(
remainingChilds: GridRow[] | HierarchyGridRow[] | ExpandableGridRow[],
Expand Down Expand Up @@ -498,6 +502,9 @@ export const getParentSelectedState = (
selectedRows: Set<ReactNode>,
checkedStateToMatch: boolean
) => {
if (!rowList.some((row) => uniqueRowId in row)) {
return;
}
const parentRow = rowFinderBasedOnId(rowList, uniqueRowId, parentKeyValue) as HierarchyGridRow;

if (!parentRow) {
Expand Down Expand Up @@ -601,7 +608,7 @@ export const getPaginatedNodes = (
* @param {string} key - The key to check if it exists in the row object.
* @param {T} obj - The row object to check the key against.
* @returns {boolean} - Returns `true` if `key` is a valid key of `obj`, otherwise `false`.
*
*
*/
export const isKeyOfRow = <T extends GridRow>(key: string, obj: T): key is Extract<keyof T, string> => {
return key in obj;
Expand Down