🐛(react) add warning when onSortModelChange is missing
We encountered the case were a user reported that the column were making cursor pointer but clicking on it was doing nothing. It was caused by the fact that onSortModelChange was not provided. So in this case we trigger a warning only if enableSorting is true on one column at least.
This commit is contained in:
5
.changeset/chatty-rabbits-remember.md
Normal file
5
.changeset/chatty-rabbits-remember.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@openfun/cunningham-react": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
add warning on DataGrid when sortModel is missing
|
||||||
@@ -2,5 +2,15 @@ import React from "react";
|
|||||||
import { BaseProps, DataGrid, Row } from ":/components/DataGrid/index";
|
import { BaseProps, DataGrid, Row } from ":/components/DataGrid/index";
|
||||||
|
|
||||||
export const DataList = <T extends Row>({ rows, ...props }: BaseProps<T>) => {
|
export const DataList = <T extends Row>({ rows, ...props }: BaseProps<T>) => {
|
||||||
return <DataGrid {...props} displayHeader={false} rows={rows} />;
|
return (
|
||||||
|
<DataGrid
|
||||||
|
{...props}
|
||||||
|
displayHeader={false}
|
||||||
|
rows={rows}
|
||||||
|
columns={props.columns.map((column) => ({
|
||||||
|
...column,
|
||||||
|
enableSorting: false,
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -92,6 +92,14 @@ export const DataGrid = <T extends Row>({
|
|||||||
const { t } = useCunningham();
|
const { t } = useCunningham();
|
||||||
const headlessColumns = useHeadlessColumns({ columns, enableRowSelection });
|
const headlessColumns = useHeadlessColumns({ columns, enableRowSelection });
|
||||||
|
|
||||||
|
headlessColumns.forEach((column) => {
|
||||||
|
if (column.enableSorting && !onSortModelChange) {
|
||||||
|
console.warn(
|
||||||
|
"You are using a column with sorting enabled, but you are not providing an `onSortModelChange` handler. The sorting will not work as expected.",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Features.
|
* Features.
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -28,7 +28,8 @@ export const useHeadlessColumns = <T extends Row>({
|
|||||||
const id = (column.id ?? column.field) as string;
|
const id = (column.id ?? column.field) as string;
|
||||||
const opts = {
|
const opts = {
|
||||||
id,
|
id,
|
||||||
enableSorting: column.enableSorting,
|
enableSorting:
|
||||||
|
column.enableSorting === undefined ? true : column.enableSorting,
|
||||||
header: column.headerName,
|
header: column.headerName,
|
||||||
cell: (info: CellContext<any, any>) => {
|
cell: (info: CellContext<any, any>) => {
|
||||||
if (column.renderCell) {
|
if (column.renderCell) {
|
||||||
|
|||||||
Reference in New Issue
Block a user