[DataGrid] Remove sortDirection from column definitions (#1015)

mui · Feb 9, 2021 · 7a01563 · 7a01563
1 parent c009456
commit 7a01563
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 78 deletions.
diff --git a/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderItem.tsx b/packages/grid/_modules_/grid/components/columnHeaders/ColumnHeaderItem.tsx
@@ -44,7 +44,7 @@ export const ColumnHeaderItem = ({
     disableColumnResize,
     disableColumnMenu,
   } = options;
-  const isColumnSorted = column.sortDirection != null;
+  const isColumnSorted = sortDirection != null;
   // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
   const isColumnNumeric = column.type === NUMBER_COLUMN_TYPE;
 

diff --git a/packages/grid/_modules_/grid/hooks/features/sorting/useSorting.ts b/packages/grid/_modules_/grid/hooks/features/sorting/useSorting.ts
@@ -29,7 +29,6 @@ import { allColumnsSelector, visibleColumnsSelector } from '../columns/columnsSe
 import { useGridSelector } from '../core/useGridSelector';
 import { useGridState } from '../core/useGridState';
 import { rowCountSelector } from '../rows/rowsSelector';
-import { SortingState } from './sortingState';
 
 export const useSorting = (apiRef: ApiRef, rowsProp: RowsProp) => {
   const logger = useLogger('useSorting');
@@ -292,29 +291,6 @@ export const useSorting = (apiRef: ApiRef, rowsProp: RowsProp) => {
     }
   }, [rowCount, apiRef, logger]);
 
-  // TODO Remove if we deprecate column.sortDirection
-  React.useEffect(() => {
-    if (visibleColumns.length > 0) {
-      const sortedColumns = apiRef.current
-        .getAllColumns()
-        .filter((column) => column.sortDirection != null)
-        .sort((a, b) => a.sortIndex! - b.sortIndex!);
-
-      const sortModel = sortedColumns.map((column) => ({
-        field: column.field,
-        sort: column.sortDirection,
-      }));
-
-      if (
-        sortModel.length > 0 &&
-        !isDeepEqual(apiRef.current.getState<SortingState>('sorting').sortModel, sortModel)
-      ) {
-        // we use apiRef to avoid watching setSortModel as it will trigger an infinite loop
-        apiRef.current.setSortModel(sortModel);
-      }
-    }
-  }, [apiRef, visibleColumns]);
-
   React.useEffect(() => {
     const sortModel = options.sortModel || [];
     const oldSortModel = apiRef.current.state.sorting.sortModel;

diff --git a/packages/grid/_modules_/grid/models/colDef/colDef.ts b/packages/grid/_modules_/grid/models/colDef/colDef.ts
@@ -4,7 +4,7 @@ import { CellClassNamePropType, CellClassRules } from '../cellClass';
 import { FilterOperator } from '../filterOperator';
 import { CellParams, ValueFormatterParams, ValueGetterParams } from '../params/cellParams';
 import { ColParams } from '../params/colParams';
-import { ComparatorFn, SortDirection } from '../sortModel';
+import { ComparatorFn } from '../sortModel';
 import { ColType, NativeColTypes } from './colType';
 
 /**
@@ -56,14 +56,6 @@ export interface ColDef {
    * A comparator function used to sort rows.
    */
   sortComparator?: ComparatorFn;
-  /**
-   * Sort the rows in a specific direction.
-   */
-  sortDirection?: SortDirection;
-  /**
-   * If multiple columns are sorted, this setting allows to order the columns sorting sequence.
-   */
-  sortIndex?: number;
   /**
    * Type allows to merge this object with a default definition [[ColDef]].
    * @default string

diff --git a/packages/grid/_modules_/grid/models/colDef/stringColDef.ts b/packages/grid/_modules_/grid/models/colDef/stringColDef.ts
@@ -8,7 +8,6 @@ export const STRING_COL_DEF: ColTypeDef = {
   sortable: true,
   resizable: true,
   filterable: true,
-  sortDirection: null,
   sortComparator: stringNumberComparer,
   type: 'string',
   align: 'left',

diff --git a/packages/storybook/src/stories/grid-filter.stories.tsx b/packages/storybook/src/stories/grid-filter.stories.tsx
@@ -511,7 +511,6 @@ export function ColumnsAlign() {
           col.align = 'left';
         }
         col.width = 180;
-        col.sortDirection = 'asc';
       });
     }
     return cols;

diff --git a/packages/storybook/src/stories/grid-options.stories.tsx b/packages/storybook/src/stories/grid-options.stories.tsx
@@ -10,11 +10,7 @@ export default {
   },
 };
 
-const columns: ColDef[] = [
-  { field: 'id' },
-  { field: 'name', sortDirection: 'asc' },
-  { field: 'age', sortDirection: 'desc' },
-];
+const columns: ColDef[] = [{ field: 'id' }, { field: 'name' }, { field: 'age' }];
 
 const rows = [
   { id: 1, name: 'alice', age: 40 },

diff --git a/packages/storybook/src/stories/grid-sorting.stories.tsx b/packages/storybook/src/stories/grid-sorting.stories.tsx
@@ -94,105 +94,136 @@ export const SortingOrderOverrideOption = () => {
 
 export const StringSortingAsc = () => {
   const columns = getColumns();
-  columns[1] = { ...columns[1], sortDirection: 'asc' };
 
   return (
     <div className="grid-container">
-      <XGrid rows={getRows()} columns={columns} />
+      <XGrid
+        rows={getRows()}
+        columns={columns}
+        sortModel={[{ field: columns[1].field, sort: 'asc' }]}
+      />
     </div>
   );
 };
 export const StringSortingDesc = () => {
   const columns = getColumns();
-  columns[1] = { ...columns[1], sortDirection: 'desc' };
 
   return (
     <div className="grid-container">
-      <XGrid rows={getRows()} columns={columns} />
+      <XGrid
+        rows={getRows()}
+        columns={columns}
+        sortModel={[{ field: columns[1].field, sort: 'desc' }]}
+      />
     </div>
   );
 };
 export const NumberSortingAsc = () => {
   const columns = getColumns();
-  columns[2] = { ...columns[2], sortDirection: 'asc' };
-
   return (
     <div className="grid-container">
-      <XGrid rows={getRows()} columns={columns} />
+      <XGrid
+        rows={getRows()}
+        columns={columns}
+        sortModel={[{ field: columns[2].field, sort: 'asc' }]}
+      />
     </div>
   );
 };
 export const NumberSortingDesc = () => {
   const columns = getColumns();
-  columns[2] = { ...columns[2], sortDirection: 'desc' };
 
   return (
     <div className="grid-container">
-      <XGrid rows={getRows()} columns={columns} />
+      <XGrid
+        rows={getRows()}
+        columns={columns}
+        sortModel={[{ field: columns[2].field, sort: 'desc' }]}
+      />
     </div>
   );
 };
 export const DateSortingAsc = () => {
   const columns = getColumns();
-  columns[3] = { ...columns[3], sortDirection: 'asc' };
-
   return (
     <div className="grid-container">
-      <XGrid rows={getRows()} columns={columns} />
+      <XGrid
+        rows={getRows()}
+        columns={columns}
+        sortModel={[{ field: columns[3].field, sort: 'asc' }]}
+      />
     </div>
   );
 };
 export const DateSortingDesc = () => {
   const columns = getColumns();
-  columns[3] = { ...columns[3], sortDirection: 'desc' };
 
   return (
     <div className="grid-container">
-      <XGrid rows={getRows()} columns={columns} />
+      <XGrid
+        rows={getRows()}
+        columns={columns}
+        sortModel={[{ field: columns[3].field, sort: 'desc' }]}
+      />
     </div>
   );
 };
 export const DateTimeSortingAsc = () => {
   const columns = getColumns();
-  columns[4] = { ...columns[4], sortDirection: 'asc' };
 
   return (
     <div className="grid-container">
-      <XGrid rows={getRows()} columns={columns} />
+      <XGrid
+        rows={getRows()}
+        columns={columns}
+        sortModel={[{ field: columns[4].field, sort: 'asc' }]}
+      />
     </div>
   );
 };
 export const DateTimeSortingDesc = () => {
   const columns = getColumns();
-  columns[4] = { ...columns[4], sortDirection: 'desc' };
 
   return (
     <div className="grid-container">
-      <XGrid rows={getRows()} columns={columns} />
+      <XGrid
+        rows={getRows()}
+        columns={columns}
+        sortModel={[{ field: columns[4].field, sort: 'desc' }]}
+      />
     </div>
   );
 };
 
 export const MultipleSorting = () => {
   const columns = getColumns();
-  columns[1] = { ...columns[1], sortDirection: 'asc' };
-  columns[2] = { ...columns[2], sortDirection: 'desc' };
-
   return (
     <div className="grid-container">
-      <XGrid rows={getRows()} columns={columns} />
+      <XGrid
+        rows={getRows()}
+        columns={columns}
+        sortModel={[
+          { field: columns[1].field, sort: 'asc' },
+          { field: columns[2].field, sort: 'desc' },
+        ]}
+      />
     </div>
   );
 };
 
 export const MultipleAndSortIndex = () => {
   const columns = getColumns();
-  columns[1] = { ...columns[1], sortDirection: 'asc', sortIndex: 2 };
-  columns[2] = { ...columns[2], sortDirection: 'desc', sortIndex: 1 };
 
   return (
     <div className="grid-container">
-      <XGrid rows={getRows()} columns={columns} />
+      <XGrid
+        rows={getRows()}
+        columns={columns}
+        sortModel={[
+          { field: columns[2].field, sort: 'desc' },
+          { field: columns[1].field, sort: 'asc' },
+        ]}
+      />
     </div>
   );
 };
@@ -221,13 +252,16 @@ export const CustomComparator = () => {
     valueGetter: (params) =>
       `${params.getValue('name') || 'unknown'}_${params.getValue('age') || 'x'}`,
     sortComparator: (v1, v2, cellParams1, cellParams2) => cellParams1.row.age - cellParams2.row.age,
-    sortDirection: 'asc',
     width: 150,
   };
 
   return (
     <div className="grid-container">
-      <XGrid rows={getRows()} columns={columns} />
+      <XGrid
+        rows={getRows()}
+        columns={columns}
+        sortModel={[{ field: columns[columns.length - 1].field, sort: 'asc' }]}
+      />
     </div>
   );
 };
@@ -236,13 +270,16 @@ export const SortingWithFormatter = () => {
   const columns = getColumns();
   columns[2] = {
     ...columns[2],
-    sortDirection: 'desc',
     valueFormatter: (params) => (params.value ? `${params.value} years ` : 'unknown'),
   };
 
   return (
     <div className="grid-container">
-      <XGrid rows={getRows()} columns={columns} />
+      <XGrid
+        rows={getRows()}
+        columns={columns}
+        sortModel={[{ field: columns[2].field, sort: 'desc' }]}
+      />
     </div>
   );
 };

diff --git a/packages/storybook/src/stories/playground/customize-components.stories.tsx b/packages/storybook/src/stories/playground/customize-components.stories.tsx
@@ -37,11 +37,7 @@ export default {
   decorators: [(StoryFn) => <StoryFn />],
 } as Meta;
 
-const columns: ColDef[] = [
-  { field: 'id' },
-  { field: 'name', sortDirection: 'asc' },
-  { field: 'age', sortDirection: 'desc' },
-];
+const columns: ColDef[] = [{ field: 'id' }, { field: 'name' }, { field: 'age' }];
 
 const rows = [
   { id: 1, name: 'alice', age: 40 },
@@ -53,7 +49,14 @@ const rows = [
   { id: 7, name: '', age: 42 },
 ];
 
-const defaultData = { columns, rows };
+const defaultData = {
+  columns,
+  rows,
+  sortModel: [
+    { field: 'name', sort: 'asc' as 'asc' },
+    { field: 'age', sort: 'desc' as 'desc' },
+  ],
+};
 
 const Template: Story<XGridProps> = (args) => {
   const data = useData(500, 50);
@@ -222,7 +225,6 @@ StyledColumns.args = {
       cellClassName: ['age', 'shine'],
       headerClassName: ['age', 'shine'],
       type: 'number',
-      sortDirection: 'desc',
     },
     {
       field: 'fullName',
@@ -247,7 +249,6 @@ StyledColumns.args = {
     {
       field: 'registerDate',
       headerName: 'Registered on',
-      sortDirection: 'asc',
       type: 'date',
     },
     {
@@ -257,6 +258,10 @@ StyledColumns.args = {
       width: 200,
     },
   ],
+  sortModel: [
+    { field: 'age', sort: 'desc' },
+    { field: 'registerDate', sort: 'asc' },
+  ],
   rows: [
     { id: 1, firstName: 'alice', age: 40 },
     {