@equinor/eds-data-grid-react 0.3.0 → 0.4.0

package/dist/eds-data-grid-react.cjs

@@ -219,7 +219,7 @@ const Resizer = styled__default.default.div.withConfig({
 const Cell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
   displayName: "TableHeaderCell__Cell",
   componentId: "sc-1n0j3v0-2"
-})(["font-weight:bold;height:30px;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
+})(["font-weight:bold;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
   if (p.$pinned) {
     return `${p.$pinned}: ${p.$offset}px;`;
   }
@@ -257,7 +257,6 @@ function TableHeaderCell({
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     "aria-sort": getSortLabel(header.column.getIsSorted()),
     onClick: header.column.getToggleSortingHandler(),
-    key: header.id,
     colSpan: header.colSpan,
     style: {
       width: header.getSize(),
@@ -302,7 +301,7 @@ function TableHeaderCell({
       "data-testid": 'resize-handle',
       children: /*#__PURE__*/jsxRuntime.jsx(ResizeInner, {})
     })]
-  });
+  }, header.id);
 }
 
 function TableHeaderRow({
@@ -350,14 +349,13 @@ function TableBodyCell({
     $pinned: pinned,
     $offset: pinnedOffset,
     className: cellClass ? cellClass(cell.row, cell.column.id) : '',
-    key: cell.id,
     style: {
       width: cell.column.getSize(),
       maxWidth: cell.column.getSize(),
       ...(cellStyle?.(cell.row, cell.column.id) ?? {})
     },
     children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())
-  });
+  }, cell.id);
 }
 
 function TableRow({
@@ -451,7 +449,11 @@ function EdsDataGrid({
   getRowId,
   rowVirtualizerInstanceRef,
   columnSizing,
-  onColumnResize
+  onColumnResize,
+  expansionState,
+  setExpansionState,
+  getSubRows,
+  defaultColumn
 }) {
   const [sorting, setSorting] = react.useState(sortingState ?? []);
   const [selection, setSelection] = react.useState(selectedRows ?? {});
@@ -465,6 +467,11 @@ function EdsDataGrid({
     pageIndex: 0,
     pageSize: pageSize ?? 25
   });
+  react.useEffect(() => {
+    if (virtualHeight) {
+      console.warn(`virtualHeight prop is deprecated and will be removed in a later version. Please update your code to use height instead.`);
+    }
+  }, [virtualHeight]);
   react.useEffect(() => {
     setVisible(columnVisibility ?? {});
   }, [columnVisibility, setVisible]);
@@ -520,7 +527,7 @@ function EdsDataGrid({
   const options = {
     data: rows,
     columns: _columns,
-    defaultColumn: {
+    defaultColumn: defaultColumn ?? {
       size: 150,
       cell: context => {
         return /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Typography, {
@@ -551,8 +558,12 @@ function EdsDataGrid({
       columnPinning: columnPin,
       rowSelection: selection,
       columnOrder: columnOrderState,
-      columnSizing: columnSizing ?? internalColumnSize
+      columnSizing: columnSizing ?? internalColumnSize,
+      expanded: expansionState
     },
+    getSubRows: getSubRows,
+    onExpandedChange: setExpansionState,
+    getExpandedRowModel: reactTable.getExpandedRowModel(),
     onSortingChange: changes => {
       if (onSortingChange) {
         onSortingChange(changes);

package/dist/esm/EdsDataGrid.js

@@ -1,5 +1,5 @@
 import { Typography, useEds, Table, Pagination } from '@equinor/eds-core-react';
-import { getCoreRowModel, getSortedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getFilteredRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
+import { getExpandedRowModel, getCoreRowModel, getSortedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getFilteredRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import { TableHeaderRow } from './components/TableHeaderRow.js';
@@ -48,7 +48,11 @@ function EdsDataGrid({
   getRowId,
   rowVirtualizerInstanceRef,
   columnSizing,
-  onColumnResize
+  onColumnResize,
+  expansionState,
+  setExpansionState,
+  getSubRows,
+  defaultColumn
 }) {
   const [sorting, setSorting] = useState(sortingState ?? []);
   const [selection, setSelection] = useState(selectedRows ?? {});
@@ -62,6 +66,11 @@ function EdsDataGrid({
     pageIndex: 0,
     pageSize: pageSize ?? 25
   });
+  useEffect(() => {
+    if (virtualHeight) {
+      console.warn(`virtualHeight prop is deprecated and will be removed in a later version. Please update your code to use height instead.`);
+    }
+  }, [virtualHeight]);
   useEffect(() => {
     setVisible(columnVisibility ?? {});
   }, [columnVisibility, setVisible]);
@@ -117,7 +126,7 @@ function EdsDataGrid({
   const options = {
     data: rows,
     columns: _columns,
-    defaultColumn: {
+    defaultColumn: defaultColumn ?? {
       size: 150,
       cell: context => {
         return /*#__PURE__*/jsx(Typography, {
@@ -148,8 +157,12 @@ function EdsDataGrid({
       columnPinning: columnPin,
       rowSelection: selection,
       columnOrder: columnOrderState,
-      columnSizing: columnSizing ?? internalColumnSize
+      columnSizing: columnSizing ?? internalColumnSize,
+      expanded: expansionState
     },
+    getSubRows: getSubRows,
+    onExpandedChange: setExpansionState,
+    getExpandedRowModel: getExpandedRowModel(),
     onSortingChange: changes => {
       if (onSortingChange) {
         onSortingChange(changes);

package/dist/esm/components/TableBodyCell.js

@@ -34,14 +34,13 @@ function TableBodyCell({
     $pinned: pinned,
     $offset: pinnedOffset,
     className: cellClass ? cellClass(cell.row, cell.column.id) : '',
-    key: cell.id,
     style: {
       width: cell.column.getSize(),
       maxWidth: cell.column.getSize(),
       ...(cellStyle?.(cell.row, cell.column.id) ?? {})
     },
     children: flexRender(cell.column.columnDef.cell, cell.getContext())
-  });
+  }, cell.id);
 }
 
 export { TableBodyCell };

package/dist/esm/components/TableHeaderCell.js

@@ -25,7 +25,7 @@ const Resizer = styled.div.withConfig({
 const Cell = styled(Table.Cell).withConfig({
   displayName: "TableHeaderCell__Cell",
   componentId: "sc-1n0j3v0-2"
-})(["font-weight:bold;height:30px;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
+})(["font-weight:bold;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
   if (p.$pinned) {
     return `${p.$pinned}: ${p.$offset}px;`;
   }
@@ -63,7 +63,6 @@ function TableHeaderCell({
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     "aria-sort": getSortLabel(header.column.getIsSorted()),
     onClick: header.column.getToggleSortingHandler(),
-    key: header.id,
     colSpan: header.colSpan,
     style: {
       width: header.getSize(),
@@ -108,7 +107,7 @@ function TableHeaderCell({
       "data-testid": 'resize-handle',
       children: /*#__PURE__*/jsx(ResizeInner, {})
     })]
-  });
+  }, header.id);
 }
 
 export { TableHeaderCell };

package/dist/types/EdsDataGrid.d.ts

@@ -1,2 +1,2 @@
 import { EdsDataGridProps } from './EdsDataGridProps';
-export declare function EdsDataGrid<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, selectedRows, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, onSelectRow, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, externalPaginator, onSortingChange, manualSorting, sortingState, columnPinState, scrollbarHorizontal, width, minWidth, height, getRowId, rowVirtualizerInstanceRef, columnSizing, onColumnResize, }: EdsDataGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function EdsDataGrid<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, selectedRows, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, onSelectRow, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, externalPaginator, onSortingChange, manualSorting, sortingState, columnPinState, scrollbarHorizontal, width, minWidth, height, getRowId, rowVirtualizerInstanceRef, columnSizing, onColumnResize, expansionState, setExpansionState, getSubRows, defaultColumn, }: EdsDataGridProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/EdsDataGridProps.d.ts

@@ -1,4 +1,4 @@
-import { Column, ColumnDef, ColumnPinningState, ColumnResizeMode, ColumnSizingState, OnChangeFn, Row, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
+import { Column, ColumnDef, ColumnPinningState, ColumnResizeMode, ColumnSizingState, ExpandedState, OnChangeFn, Row, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
 import { Virtualizer } from '@tanstack/react-virtual';
 import { CSSProperties, MutableRefObject, ReactElement } from 'react';
 type BaseProps<T> = {
@@ -84,6 +84,11 @@ type BaseProps<T> = {
      * @link [Guide](https://tanstack.com/table/v8/docs/guide/tables)
      */
     getRowId?: TableOptions<T>['getRowId'];
+    /**
+     * Optional prop to override the default column setup (cell, header, size etc.)
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/core/table#defaultcolumn)
+     */
+    defaultColumn?: Partial<ColumnDef<T, unknown>>;
 };
 type StyleProps<T> = {
     /**
@@ -155,6 +160,7 @@ type VirtualProps = {
     enableVirtual?: boolean;
     /**
      * The height of the virtualized table in pixels.
+     * @deprecated Use `height` prop over virtualHeight, this will be removed in a later version
      * @default 500
      */
     virtualHeight?: number;
@@ -187,7 +193,12 @@ type ColumnProps = {
 type RefProps = {
     rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, Element> | null>;
 };
-export type EdsDataGridProps<T> = BaseProps<T> & StyleProps<T> & SortProps & FilterProps & PagingProps & ColumnProps & VirtualProps & RefProps & {
+type ExpansionProps<T> = {
+    expansionState?: ExpandedState;
+    setExpansionState?: React.Dispatch<React.SetStateAction<ExpandedState>>;
+    getSubRows?: (row: T, rowIndex: number) => Array<T>;
+};
+export type EdsDataGridProps<T> = BaseProps<T> & StyleProps<T> & SortProps & FilterProps & PagingProps & ColumnProps & VirtualProps & RefProps & ExpansionProps<T> & {
     /**
      * Which columns are visible. If not set, all columns are visible. undefined means that the column is visible.
      * @default undefined

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-data-grid-react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A feature-rich data-grid written in React, implementing the Equinor Design System",
   "license": "MIT",
   "types": "dist/types/index.d.ts",
@@ -20,11 +20,11 @@
     "styled-components": ">=4.2"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.10.7",
-    "@tanstack/react-virtual": "^3.0.4",
+    "@tanstack/react-table": "^8.13.2",
+    "@tanstack/react-virtual": "^3.1.3",
     "@equinor/eds-icons": "^0.21.0",
-    "@equinor/eds-utils": "^0.8.4",
-    "@equinor/eds-tokens": "0.9.2"
+    "@equinor/eds-tokens": "0.9.2",
+    "@equinor/eds-utils": "^0.8.4"
   },
   "devDependencies": {
     "@mdx-js/react": "2.3.0",