fix(useTable): sort should adapt to enhanced row types (#25487)

* fix(useTable): sort should adapt to enhanced row types ```ts const rows = sort(getRows(row) => ({...row, foo: 'foo'})) // Error! console.log(rows[0].foo) ``` * update md * changefile
microsoft · Nov 2, 2022 · 072f041 · 072f041
1 parent e807070
commit 072f041
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/change/@fluentui-react-table-c3838956-bc8b-4f1d-bcc9-3e89d914bb6f.json b/change/@fluentui-react-table-c3838956-bc8b-4f1d-bcc9-3e89d914bb6f.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(useTable): sort should adapt to enhanced row types",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md
@@ -427,7 +427,7 @@ export type TableSlots = {
 export interface TableSortState<TItem> {
     getSortDirection: (columnId: ColumnId) => SortDirection | undefined;
     setColumnSort: (columnId: ColumnId, sortDirection: SortDirection) => void;
-    sort: (rows: RowState<TItem>[]) => RowState<TItem>[];
+    sort: <TRowState extends RowState<TItem>>(rows: TRowState[]) => TRowState[];
     sortColumn: ColumnId | undefined;
     sortDirection: SortDirection;
     toggleColumnSort: (columnId: ColumnId) => void;

diff --git a/packages/react-components/react-table/src/hooks/types.ts b/packages/react-components/react-table/src/hooks/types.ts
@@ -44,7 +44,7 @@ export interface TableSortState<TItem> {
   /**
    * Sorts rows and returns a **shallow** copy of original items
    */
-  sort: (rows: RowState<TItem>[]) => RowState<TItem>[];
+  sort: <TRowState extends RowState<TItem>>(rows: TRowState[]) => TRowState[];
 }
 
 export interface TableSelectionState {

diff --git a/packages/react-components/react-table/src/hooks/useSort.ts b/packages/react-components/react-table/src/hooks/useSort.ts
@@ -6,7 +6,7 @@ const noop = () => undefined;
 export const defaultTableSortState: TableSortState<unknown> = {
   getSortDirection: () => 'ascending',
   setColumnSort: noop,
-  sort: (rows: RowState<unknown>[]) => [...rows],
+  sort: <TRowState extends RowState<unknown>>(rows: TRowState[]) => [...rows],
   sortColumn: undefined,
   sortDirection: 'ascending',
   toggleColumnSort: noop,
@@ -53,7 +53,7 @@ export function useSortState<TItem>(tableState: TableState<TItem>, options: UseS
     setSorted(newState);
   };
 
-  const sort = (rows: RowState<TItem>[]) => {
+  const sort = <TRowState extends RowState<TItem>>(rows: TRowState[]) => {
     return rows.slice().sort((a, b) => {
       const sortColumnDef = columns.find(column => column.columnId === sortColumn);
       if (!sortColumnDef?.compare) {