@equinor/eds-data-grid-react 0.1.0-beta.3 → 0.3.0-rc

package/dist/esm/components/Filter.js

@@ -1,57 +1,111 @@
-import { useMemo } from 'react';
+import { useState, useRef, useMemo } from 'react';
 import { DebouncedInput } from './DebouncedInput.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button, Icon, Popover } from '@equinor/eds-core-react';
+import { filter_alt_active, filter_alt } from '@equinor/eds-icons';
+import styled from 'styled-components';
+import { tokens } from '@equinor/eds-tokens';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 /* istanbul ignore file */
 
-function Filter(_ref) {
-  var _table$getPreFiltered, _column$getFacetedMin, _column$getFacetedMin2, _column$getFacetedMin3, _column$getFacetedMin4, _, _column$getFacetedMin5, _column$getFacetedMin6, _column$getFacetedMin7, _column$getFacetedMin8, _column$getFacetedMin9, _column$getFacetedMin10, _2, _column$getFacetedMin11, _column$getFacetedMin12;
-  var column = _ref.column,
-    table = _ref.table;
-  var firstValue = (_table$getPreFiltered = table.getPreFilteredRowModel().flatRows[0]) === null || _table$getPreFiltered === void 0 ? void 0 : _table$getPreFiltered.getValue(column.id);
-  var columnFilterValue = column.getFilterValue();
-  var sortedUniqueValues = useMemo(function () {
-    return typeof firstValue === 'number' ? [] : Array.from(column.getFacetedUniqueValues().keys()).sort().map(function (v) {
-      return v !== null && v !== void 0 ? v : 'NULL_OR_UNDEFINED';
-    });
-  },
+const NumberContainer = styled.div.withConfig({
+  displayName: "Filter__NumberContainer",
+  componentId: "sc-ytpdpw-0"
+})(["display:grid;grid-template-columns:80px 80px;grid-column-gap:32px;"]);
+function Filter({
+  column,
+  table
+}) {
+  const firstValue = table.getPreFilteredRowModel().flatRows[0]?.getValue(column.id);
+  const [open, setOpen] = useState(false);
+  const filterIconRef = useRef();
+  const togglePopover = event => {
+    event.stopPropagation();
+    setOpen(!open);
+  };
+  const columnText = useMemo(() => {
+    let header;
+    try {
+      if (typeof column.columnDef.header === 'function') {
+        const obj = column.columnDef.header(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-argument
+        {});
+        header = obj.props.children;
+      } else {
+        header = column.columnDef.header;
+      }
+    } catch {
+      /*em all*/
+    }
+    return header;
+  }, [column.columnDef]);
+  const columnFilterValue = column.getFilterValue();
+  const sortedUniqueValues = useMemo(() => typeof firstValue === 'number' ? [] : Array.from(column.getFacetedUniqueValues().keys()).sort().map(v => v ?? 'NULL_OR_UNDEFINED'),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [column.getFacetedUniqueValues()]);
-  return typeof firstValue === 'number' ? /*#__PURE__*/jsxs("div", {
-    children: [/*#__PURE__*/jsx(DebouncedInput, {
-      type: "number",
-      values: sortedUniqueValues,
-      min: Number((_column$getFacetedMin = (_column$getFacetedMin2 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin2 === void 0 ? void 0 : _column$getFacetedMin2[0]) !== null && _column$getFacetedMin !== void 0 ? _column$getFacetedMin : ''),
-      max: Number((_column$getFacetedMin3 = (_column$getFacetedMin4 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin4 === void 0 ? void 0 : _column$getFacetedMin4[1]) !== null && _column$getFacetedMin3 !== void 0 ? _column$getFacetedMin3 : ''),
-      value: (_ = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[0]) !== null && _ !== void 0 ? _ : '',
-      onChange: function onChange(value) {
-        return column.setFilterValue(function (old) {
-          return [value, old === null || old === void 0 ? void 0 : old[1]];
-        });
+  const hasActiveFilters = value => {
+    if (Array.isArray(value)) {
+      if (typeof firstValue === 'number') {
+        return value.some(v => !isNaN(v) && !!v);
+      } else {
+        return value.filter(v => !!v).length > 0;
+      }
+    }
+    return value;
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Button, {
+      "aria-haspopup": true,
+      "aria-expanded": open,
+      "data-testid": 'open-filters',
+      ref: filterIconRef,
+      onClick: togglePopover,
+      variant: 'ghost_icon',
+      children: /*#__PURE__*/jsx(Icon, {
+        color: tokens.colors.text.static_icons__default.hex,
+        data: hasActiveFilters(columnFilterValue) ? filter_alt_active : filter_alt
+      })
+    }), /*#__PURE__*/jsx(Popover, {
+      style: {
+        width: typeof firstValue === 'number' ? '220px' : '340px'
       },
-      placeholder: "Min ".concat((_column$getFacetedMin5 = column.getFacetedMinMaxValues()) !== null && _column$getFacetedMin5 !== void 0 && _column$getFacetedMin5[0] ? "(".concat((_column$getFacetedMin6 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin6 === void 0 ? void 0 : _column$getFacetedMin6[0], ")") : '')
-    }), /*#__PURE__*/jsx(DebouncedInput, {
-      type: "number",
-      values: sortedUniqueValues,
-      min: Number((_column$getFacetedMin7 = (_column$getFacetedMin8 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin8 === void 0 ? void 0 : _column$getFacetedMin8[0]) !== null && _column$getFacetedMin7 !== void 0 ? _column$getFacetedMin7 : ''),
-      max: Number((_column$getFacetedMin9 = (_column$getFacetedMin10 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin10 === void 0 ? void 0 : _column$getFacetedMin10[1]) !== null && _column$getFacetedMin9 !== void 0 ? _column$getFacetedMin9 : ''),
-      value: (_2 = columnFilterValue === null || columnFilterValue === void 0 ? void 0 : columnFilterValue[1]) !== null && _2 !== void 0 ? _2 : '',
-      onChange: function onChange(value) {
-        return column.setFilterValue(function (old) {
-          return [old === null || old === void 0 ? void 0 : old[0], value];
-        });
-      },
-      placeholder: "Max ".concat((_column$getFacetedMin11 = column.getFacetedMinMaxValues()) !== null && _column$getFacetedMin11 !== void 0 && _column$getFacetedMin11[1] ? "(".concat((_column$getFacetedMin12 = column.getFacetedMinMaxValues()) === null || _column$getFacetedMin12 === void 0 ? void 0 : _column$getFacetedMin12[1], ")") : '')
+      anchorEl: filterIconRef.current,
+      open: open,
+      onClose: () => setOpen(false),
+      children: /*#__PURE__*/jsx(Popover.Content, {
+        style: {
+          width: typeof firstValue === 'number' ? '180px' : '310px'
+        },
+        children: typeof firstValue === 'number' ? /*#__PURE__*/jsxs(NumberContainer, {
+          children: [/*#__PURE__*/jsx(DebouncedInput, {
+            type: "number",
+            values: sortedUniqueValues,
+            min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
+            max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
+            value: columnFilterValue?.[0] ?? '',
+            onChange: value => column.setFilterValue(old => [value, old?.[1]]),
+            placeholder: `Min ${column.getFacetedMinMaxValues()?.[0] ? `(${column.getFacetedMinMaxValues()?.[0]})` : ''}`
+          }), /*#__PURE__*/jsx(DebouncedInput, {
+            type: "number",
+            values: sortedUniqueValues,
+            min: Number(column.getFacetedMinMaxValues()?.[0] ?? ''),
+            max: Number(column.getFacetedMinMaxValues()?.[1] ?? ''),
+            value: columnFilterValue?.[1] ?? '',
+            onChange: value => column.setFilterValue(old => [old?.[0], value]),
+            placeholder: `Max ${column.getFacetedMinMaxValues()?.[1] ? `(${column.getFacetedMinMaxValues()?.[1]})` : ''}`
+          })]
+        }) : /*#__PURE__*/jsx(DebouncedInput, {
+          type: "text",
+          label: columnText,
+          values: sortedUniqueValues,
+          debounce: 100,
+          value: columnFilterValue ?? [],
+          onChange: value => column.setFilterValue(value),
+          placeholder: `${(columnFilterValue ?? []).length} / ${column.getFacetedUniqueValues().size} selected`,
+          list: column.id + 'list'
+        })
+      })
     })]
-  }) : /*#__PURE__*/jsx(DebouncedInput, {
-    type: "text",
-    values: sortedUniqueValues,
-    value: columnFilterValue !== null && columnFilterValue !== void 0 ? columnFilterValue : '',
-    onChange: function onChange(value) {
-      return column.setFilterValue(value);
-    },
-    placeholder: "Search (".concat(column.getFacetedUniqueValues().size, ")"),
-    list: column.id + 'list'
   });
 }
 

package/dist/esm/components/TableBodyCell.js

@@ -1,31 +1,46 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { flexRender } from '@tanstack/react-table';
-import { Table, Typography } from '@equinor/eds-core-react';
+import { Table } from '@equinor/eds-core-react';
 import { useTableContext } from '../EdsDataGridContext.js';
+import { useMemo } from 'react';
+import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-function TableBodyCell(_ref) {
-  var _cellStyle;
-  var cell = _ref.cell;
-  var _useTableContext = useTableContext(),
-    cellClass = _useTableContext.cellClass,
-    cellStyle = _useTableContext.cellStyle;
-  return /*#__PURE__*/jsx(Table.Cell, {
+const StyledCell = styled(Table.Cell).withConfig({
+  displayName: "TableBodyCell__StyledCell",
+  componentId: "sc-1gsd2k4-0"
+})(["position:", ";", " z-index:", ";background-color:inherit;"], p => p.$pinned ? 'sticky' : 'relative', p => {
+  if (p.$pinned) {
+    return `${p.$pinned}: ${p.$offset}px;`;
+  }
+  return '';
+}, p => p.$pinned ? 11 : 'auto');
+function TableBodyCell({
+  cell
+}) {
+  const {
+    cellClass,
+    cellStyle,
+    table
+  } = useTableContext();
+  const pinned = cell.column.getIsPinned();
+  const pinnedOffset = useMemo(() => {
+    if (!pinned) {
+      return 0;
+    }
+    const header = table.getFlatHeaders().find(h => h.id === cell.column.id);
+    return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - cell.column.getSize();
+  }, [pinned, cell.column, table]);
+  return /*#__PURE__*/jsx(StyledCell, {
+    $pinned: pinned,
+    $offset: pinnedOffset,
     className: cellClass ? cellClass(cell.row, cell.column.id) : '',
     key: cell.id,
-    style: _objectSpread({
+    style: {
       width: cell.column.getSize(),
       maxWidth: cell.column.getSize(),
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
-    }, (_cellStyle = cellStyle === null || cellStyle === void 0 ? void 0 : cellStyle(cell.row, cell.column.id)) !== null && _cellStyle !== void 0 ? _cellStyle : {}),
-    children: /*#__PURE__*/jsx(Typography, {
-      as: "span",
-      group: "table",
-      variant: "cell_text",
-      children: flexRender(cell.column.columnDef.cell, cell.getContext())
-    })
+      ...(cellStyle?.(cell.row, cell.column.id) ?? {})
+    },
+    children: flexRender(cell.column.columnDef.cell, cell.getContext())
   });
 }
 

package/dist/esm/components/TableHeaderCell.js

@@ -1,4 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { flexRender } from '@tanstack/react-table';
 import { Table, Icon } from '@equinor/eds-core-react';
 import { arrow_up, arrow_down } from '@equinor/eds-icons';
@@ -6,90 +5,108 @@ import { useTableContext } from '../EdsDataGridContext.js';
 import { Filter } from './Filter.js';
 import styled from 'styled-components';
 import { tokens } from '@equinor/eds-tokens';
+import { useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-var getSortLabel = function getSortLabel(sorted) {
+const getSortLabel = sorted => {
   if (sorted) {
-    return "".concat(sorted, "ending");
+    return `${sorted}ending`;
   }
   return 'none';
 };
-var Resizer = styled.div.withConfig({
-  displayName: "TableHeaderCell__Resizer",
+const ResizeInner = styled.div.withConfig({
+  displayName: "TableHeaderCell__ResizeInner",
   componentId: "sc-1n0j3v0-0"
-})(["transform:", ";opacity:", ";position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;"], function (props) {
-  return props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none';
-}, function (props) {
-  return props.$isResizing ? 1 : 0;
-});
-var Cell = styled(Table.Cell).withConfig({
-  displayName: "TableHeaderCell__Cell",
+})(["width:2px;opacity:0;height:100%;"]);
+const Resizer = styled.div.withConfig({
+  displayName: "TableHeaderCell__Resizer",
   componentId: "sc-1n0j3v0-1"
-})(["font-weight:bold;height:30px;position:", ";&:hover ", "{background:", ";opacity:1;}"], function (p) {
-  return p.sticky ? 'sticky' : 'relative';
-}, Resizer, tokens.colors.interactive.primary__hover.rgba);
-function TableHeaderCell(_ref) {
-  var _asc$desc;
-  var header = _ref.header,
-    columnResizeMode = _ref.columnResizeMode;
-  var ctx = useTableContext();
-  var table = ctx.table;
+})(["transform:", ";", "{opacity:", ";}position:absolute;right:0;top:0;height:100%;width:5px;cursor:col-resize;user-select:none;touch-action:none;display:flex;justify-content:flex-end;"], props => props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none', ResizeInner, props => props.$isResizing ? 1 : 0);
+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 => {
+  if (p.$pinned) {
+    return `${p.$pinned}: ${p.$offset}px;`;
+  }
+  return '';
+}, p => {
+  if (p.$sticky && p.$pinned) return 'z-index: 13';
+  if (p.$sticky || p.$pinned) return 'z-index: 12';
+}, ResizeInner, tokens.colors.interactive.primary__hover.rgba);
+function TableHeaderCell({
+  header,
+  columnResizeMode
+}) {
+  const ctx = useTableContext();
+  const table = ctx.table;
+  const pinned = header.column.getIsPinned();
+  const offset = useMemo(() => {
+    if (!pinned) {
+      return null;
+    }
+    return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - header.getSize();
+  }, [pinned, header, table]);
   return header.isPlaceholder ? /*#__PURE__*/jsx(Cell, {
-    sticky: ctx.stickyHeader,
+    $sticky: ctx.stickyHeader,
+    $offset: offset,
+    $pinned: pinned,
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
-    style: ctx.headerStyle ? ctx.headerStyle(header.column) : {},
+    style: {
+      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
+    },
     "aria-hidden": true
   }) : /*#__PURE__*/jsxs(Cell, {
-    sticky: ctx.stickyHeader,
+    $sticky: ctx.stickyHeader,
+    $offset: offset,
+    $pinned: pinned,
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     "aria-sort": getSortLabel(header.column.getIsSorted()),
     onClick: header.column.getToggleSortingHandler(),
     key: header.id,
     colSpan: header.colSpan,
-    style: _objectSpread({
+    style: {
       width: header.getSize(),
-      verticalAlign: ctx.enableColumnFiltering ? 'baseline' : 'middle'
-    }, ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
+      verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
+      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
+    },
     children: [/*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx("div", {
         style: {
           display: 'flex',
           flexDirection: 'column'
         },
-        children: [/*#__PURE__*/jsx("span", {
+        children: /*#__PURE__*/jsx("span", {
           className: "table-header-cell-label",
           children: flexRender(header.column.columnDef.header, header.getContext())
-        }), header.column.getCanFilter() ?
-        /*#__PURE__*/
-        // Supressing this warning - div is not interactive, but prevents propagation of events to avoid unintended sorting
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-        jsx("div", {
-          onClick: function onClick(e) {
-            return e.stopPropagation();
-          },
-          children: /*#__PURE__*/jsx(Filter, {
-            column: header.column,
-            table: table
-          })
-        }) : null]
-      }), (_asc$desc = {
+        })
+      }), {
         asc: /*#__PURE__*/jsx(Icon, {
           data: arrow_up
         }),
         desc: /*#__PURE__*/jsx(Icon, {
           data: arrow_down
         })
-      }[header.column.getIsSorted()]) !== null && _asc$desc !== void 0 ? _asc$desc : null]
+      }[header.column.getIsSorted()] ?? null, header.column.getCanFilter() ?
+      
+      // Supressing this warning - div is not interactive, but prevents propagation of events to avoid unintended sorting
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+      jsx("div", {
+        onClick: e => e.stopPropagation(),
+        children: /*#__PURE__*/jsx(Filter, {
+          column: header.column,
+          table: table
+        })
+      }) : null]
     }), columnResizeMode && /*#__PURE__*/jsx(Resizer, {
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      },
+      onClick: e => e.stopPropagation(),
       onMouseDown: header.getResizeHandler(),
       onTouchStart: header.getResizeHandler(),
       $isResizing: header.column.getIsResizing(),
       $columnResizeMode: columnResizeMode,
       className: 'resize-handle',
-      "data-testid": 'resize-handle'
+      "data-testid": 'resize-handle',
+      children: /*#__PURE__*/jsx(ResizeInner, {})
     })]
   });
 }

package/dist/esm/components/TableHeaderRow.js

@@ -2,20 +2,19 @@ import { Table } from '@equinor/eds-core-react';
 import { TableHeaderCell } from './TableHeaderCell.js';
 import { jsx } from 'react/jsx-runtime';
 
-function TableHeaderRow(_ref) {
-  var headerGroup = _ref.headerGroup,
-    columnResizeMode = _ref.columnResizeMode,
-    deltaOffset = _ref.deltaOffset,
-    table = _ref.table;
+function TableHeaderRow({
+  headerGroup,
+  columnResizeMode,
+  deltaOffset,
+  table
+}) {
   return /*#__PURE__*/jsx(Table.Row, {
-    children: headerGroup.headers.map(function (header) {
-      return /*#__PURE__*/jsx(TableHeaderCell, {
-        header: header,
-        table: table,
-        columnResizeMode: columnResizeMode,
-        deltaOffset: deltaOffset
-      }, header.id);
-    })
+    children: headerGroup.headers.map(header => /*#__PURE__*/jsx(TableHeaderCell, {
+      header: header,
+      table: table,
+      columnResizeMode: columnResizeMode,
+      deltaOffset: deltaOffset
+    }, header.id))
   });
 }
 

package/dist/esm/components/TableRow.js

@@ -1,29 +1,33 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { Table } from '@equinor/eds-core-react';
 import { TableBodyCell } from './TableBodyCell.js';
 import { useTableContext } from '../EdsDataGridContext.js';
+import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-function TableRow(_ref) {
-  var _rowStyle;
-  var row = _ref.row;
-  var _useTableContext = useTableContext(),
-    rowClass = _useTableContext.rowClass,
-    rowStyle = _useTableContext.rowStyle;
-  return /*#__PURE__*/jsx(Table.Row, {
-    style: _objectSpread({
-      cursor: row.getCanSelect() ? 'pointer' : 'inherit'
-    }, (_rowStyle = rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle(row)) !== null && _rowStyle !== void 0 ? _rowStyle : {}),
-    className: "".concat(row.getIsSelected() ? 'selected' : '', " ").concat(rowClass === null || rowClass === void 0 ? void 0 : rowClass(row)),
-    onClick: function onClick() {
-      return row.getCanSelect() ? row.toggleSelected() : null;
+function TableRow({
+  row
+}) {
+  const {
+    rowClass,
+    rowStyle
+  } = useTableContext();
+  return /*#__PURE__*/jsx(StyledTableRow, {
+    style: {
+      cursor: row.getCanSelect() ? 'pointer' : 'inherit',
+      ...(rowStyle?.(row) ?? {})
     },
-    children: row.getVisibleCells().map(function (cell) {
-      return /*#__PURE__*/jsx(TableBodyCell, {
-        cell: cell
-      }, cell.id);
-    })
+    className: `${row.getIsSelected() ? 'selected' : ''} ${rowClass?.(row)}`,
+    onClick: () => row.getCanSelect() ? row.toggleSelected() : null,
+    children: row.getVisibleCells().map(cell => /*#__PURE__*/jsx(TableBodyCell, {
+      cell: cell
+    }, cell.id))
   });
 }
 
+// Neccessary to have this attribute as class to prevent overriding hover color
+const StyledTableRow = styled(Table.Row).withConfig({
+  displayName: "TableRow__StyledTableRow",
+  componentId: "sc-1vjfq5p-0"
+})(["background-color:inherit;"]);
+
 export { TableRow };

package/dist/types/EdsDataGrid.d.ts

@@ -1,133 +1,2 @@
-import { Column, ColumnDef, ColumnResizeMode, OnChangeFn, Row, RowSelectionState } from '@tanstack/react-table';
-import { CSSProperties, ReactElement } from 'react';
-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;
-    /**
-     * 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;
-};
-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, }: EdsDataGridProps<T>): JSX.Element;
+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, }: EdsDataGridProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/EdsDataGridContext.d.ts

@@ -15,6 +15,6 @@ type Context<T> = {
 export declare const EdsDataGridContext: import("react").Context<Context<any>>;
 export declare function TableProvider<T>({ children, ...props }: Context<T> & {
     children: ReactElement | Array<ReactElement>;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare const useTableContext: () => Context<any>;
 export {};