feat(data-grid): Add functionality for manual/external sorting (#3172)

* feat(data-grid): Add functionality for manual/external sorting * Extract props * Add manualSorting, onSortingChange, sortingState * feat(data-grid): Add functionality for manual/external sorting ...lint errors * feat(data-grid): Add documentation for external sort
equinor · Dec 4, 2023 · 0d3cb4d · 0d3cb4d
1 parent f6fed15
commit 0d3cb4d
Show file tree

Hide file tree

Showing 5 changed files with 234 additions and 144 deletions.
diff --git a/packages/eds-data-grid-react/src/EdsDataGrid.docs.mdx b/packages/eds-data-grid-react/src/EdsDataGrid.docs.mdx
@@ -91,6 +91,13 @@ See [https://tanstack.com/table/v8/docs/api/features/sorting](Tanstack docs for
 
 <Canvas of={ComponentStories.Sortable} />
 
+### External sorting
+
+It's also possible to handle sorting manually by setting manualSorting to `true` and listening on the onSortingChange prop.
+See [https://tanstack.com/table/v8/docs/api/features/sorting](Tanstack docs for more)
+
+<Canvas of={ComponentStories.ManualSorting} />
+
 ### Filtering
 
 Comes with prebuilt functionality for column filtering, defaulting to range (from - to) for numbers and multi-select for strings.

diff --git a/packages/eds-data-grid-react/src/EdsDataGrid.stories.tsx b/packages/eds-data-grid-react/src/EdsDataGrid.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryFn } from '@storybook/react'
-import { EdsDataGrid, EdsDataGridProps } from './EdsDataGrid'
+import { EdsDataGrid } from './EdsDataGrid'
 import { columns, groupedColumns, Photo } from './stories/columns'
 import { data } from './stories/data'
 import { CSSProperties, useEffect, useState } from 'react'
@@ -14,6 +14,7 @@ import page from './EdsDataGrid.docs.mdx'
 import { Column, Row } from '@tanstack/react-table'
 import { tokens } from '@equinor/eds-tokens'
 import { action } from '@storybook/addon-actions'
+import { EdsDataGridProps } from './EdsDataGridProps'
 
 const meta: Meta<typeof EdsDataGrid<Photo>> = {
   title: 'EDS Data grid',
@@ -109,6 +110,31 @@ export const Sortable: StoryFn<EdsDataGridProps<Photo>> = (args) => {
 Sortable.args = {
   enableSorting: true,
   columns: groupedColumns,
+  sortingState: [
+    {
+      desc: true,
+      id: 'id',
+    },
+  ],
+}
+
+export const ManualSorting: StoryFn<EdsDataGridProps<Photo>> = (
+  args: EdsDataGridProps<Photo>,
+) => {
+  return <EdsDataGrid {...args} />
+}
+
+ManualSorting.args = {
+  enableSorting: true,
+  manualSorting: true,
+  onSortingChange: (c) => {
+    if (typeof c === 'function') {
+      action('Change sorting')(c([]))
+    } else {
+      action('Change sorting')(c)
+    }
+  },
+  columns: groupedColumns,
 }
 
 export const ColumnOrdering: StoryFn<EdsDataGridProps<Photo>> = (args) => {

diff --git a/packages/eds-data-grid-react/src/EdsDataGrid.tsx b/packages/eds-data-grid-react/src/EdsDataGrid.tsx
@@ -1,19 +1,15 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import {
-  Column,
   ColumnDef,
   ColumnFiltersState,
-  ColumnResizeMode,
   getCoreRowModel,
   getFacetedMinMaxValues,
   getFacetedRowModel,
   getFacetedUniqueValues,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
-  OnChangeFn,
   PaginationState,
-  Row,
   RowSelectionState,
   SortingState,
   TableOptions,
@@ -22,7 +18,6 @@ import {
 import { Pagination, Table, useEds } from '@equinor/eds-core-react'
 import {
   CSSProperties,
-  ReactElement,
   useCallback,
   useEffect,
   useMemo,
@@ -33,142 +28,7 @@ import { TableHeaderRow } from './components/TableHeaderRow'
 import { TableRow } from './components/TableRow'
 import { TableProvider } from './EdsDataGridContext'
 import { useVirtualizer } from '@tanstack/react-virtual'
-
-export type EdsDataGridProps<T> = {
-  /**
-   * The rows to display in the table
-   */
-  rows: Array<T>
-  /**
-   * Definition of the columns to display in the table
-   */
-  columns: ColumnDef<T>[]
-  /**
-   * The mode of column resizing. If not set, column resizing is disabled.
-   * Can be either 'onChange' or 'onEnd'
-   * @default undefined
-   */
-  columnResizeMode?: ColumnResizeMode
-  /**
-   * Set this to enable rowSelection. If a function is provided, it will be called for each row to determine if it is selectable.
-   * @default false
-   */
-  rowSelection?: boolean | ((row: Row<T>) => boolean)
-  /**
-   * Callback for when row-selection changes
-   */
-  onSelectRow?: OnChangeFn<RowSelectionState>
-  /**
-   * Enable debug mode. See https://tanstack.com/table/v8/docs/api/core/table#debugall
-   * @default false
-   */
-  debug?: boolean
-  /**
-   * Enable sorting.
-   * @default false
-   */
-  enableSorting?: boolean
-  /**
-   * Make the table header sticky
-   * @default false
-   */
-  stickyHeader?: boolean
-  /**
-   * Element to display in Table.Caption
-   * @default undefined
-   */
-  caption?: ReactElement
-  /**
-   * Whether to enable column filtering, adding inputs to the header cells
-   * Individual columns can be configured to disable filtering
-   * @default false
-   */
-  enableColumnFiltering?: boolean
-  /**
-   * Whether pagination should be enabled.
-   * @default false
-   */
-  enablePagination?: boolean
-  /**
-   * The number of rows per page
-   * Only used if enablePagination is true
-   * @default 25
-   */
-  pageSize?: number
-  /**
-   * Add this if you want to implement a custom pagination component
-   * Useful for e.g server-side paging
-   */
-  externalPaginator?: ReactElement
-  /**
-   * The message to display when there are no rows
-   * @default undefined
-   */
-  emptyMessage?: string
-  /**
-   * The currently selected rows
-   * @default {}
-   */
-  selectedRows?: Record<string | number, boolean>
-  /**
-   * Whether to enable virtualization. This will render only the visible rows currently in view.
-   * @default false
-   */
-  enableVirtual?: boolean
-  /**
-   * The height of the virtualized table in pixels.
-   * @default 500
-   */
-  virtualHeight?: number
-  /**
-   * Which columns are visible. If not set, all columns are visible. undefined means that the column is visible.
-   * @default undefined
-   */
-  columnVisibility?: Record<string, boolean>
-  /**
-   * Callback for when column visibility changes. Only called if columnVisibility is set.
-   * @param columnVisibility
-   */
-  columnVisibilityChange?: (columnVisibility: Record<string, boolean>) => void
-  /**
-   * An array of the columnIds in the order they should be displayed.
-   */
-  columnOrder?: Array<string>
-  /**
-   * Function that can be used to set custom css on a cell
-   * @param row
-   * @param columnId
-   */
-  cellStyle?: (row: Row<T>, columnId: string) => CSSProperties
-  /**
-   * Function that can be used to set a custom class on a cell
-   * @param row
-   * @param columnId
-   * @returns string with list of classes
-   */
-  cellClass?: (row: Row<T>, columnId: string) => string
-  /**
-   * Function that can be used to set a custom class on a row
-   * @param row
-   * @returns string with list of classes
-   */
-  rowClass?: (row: Row<T>) => string
-  /**
-   * Function that can be used to set custom css on a row
-   * @param row
-   */
-  rowStyle?: (row: Row<T>) => CSSProperties
-  /**
-   * Function that can be used to set custom classes on a header cell
-   * @param column
-   */
-  headerClass?: (column: Column<T>) => string
-  /**
-   * Function that can be used to set custom styles on a header cell
-   * @param column
-   */
-  headerStyle?: (column: Column<T>) => CSSProperties
-}
+import { EdsDataGridProps } from './EdsDataGridProps'
 
 export function EdsDataGrid<T>({
   rows,
@@ -197,8 +57,11 @@ export function EdsDataGrid<T>({
   headerClass,
   headerStyle,
   externalPaginator,
+  onSortingChange,
+  manualSorting,
+  sortingState,
 }: EdsDataGridProps<T>) {
-  const [sorting, setSorting] = useState<SortingState>([])
+  const [sorting, setSorting] = useState<SortingState>(sortingState ?? [])
   const [selection, setSelection] = useState<RowSelectionState>(
     selectedRows ?? {},
   )
@@ -214,6 +77,11 @@ export function EdsDataGrid<T>({
   useEffect(() => {
     setVisible(columnVisibility ?? {})
   }, [columnVisibility, setVisible])
+
+  useEffect(() => {
+    setSorting(sortingState)
+  }, [sortingState])
+
   useEffect(() => {
     setSelection(selectedRows ?? {})
   }, [selectedRows])
@@ -273,10 +141,16 @@ export function EdsDataGrid<T>({
       rowSelection: selection,
       columnOrder: columnOrderState,
     },
-    onSortingChange: setSorting,
+    onSortingChange: (changes) => {
+      if (onSortingChange) {
+        onSortingChange(changes)
+      }
+      setSorting(changes)
+    },
     enableColumnFilters: !!enableColumnFiltering,
     enableFilters: !!enableColumnFiltering,
     enableSorting: enableSorting ?? false,
+    manualSorting: manualSorting ?? false,
     enableColumnResizing: !!columnResizeMode,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),