@equinor/eds-data-grid-react 0.7.7 → 0.8.0

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

@@ -59,7 +59,6 @@ function DebouncedInput({
       label: props.placeholder,
       children: /*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Input, {
         type: 'number',
-        placeholder: '0',
         value: value,
         onChange: e => setValue(e.target.valueAsNumber)
       })
@@ -161,6 +160,34 @@ function Filter({
   });
 }
 
+const ResizeInner = styled__default.default.div.withConfig({
+  displayName: "Resizer__ResizeInner",
+  componentId: "sc-plcbjs-0"
+})(["width:2px;opacity:0;height:100%;"]);
+const Resizer = styled__default.default.div.withConfig({
+  displayName: "Resizer",
+  componentId: "sc-plcbjs-1"
+})(["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;z-index:1;"], props => props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none', ResizeInner, props => props.$isResizing ? 1 : 0);
+
+const FilterVisibility = styled__default.default.div.withConfig({
+  displayName: "TableCell__FilterVisibility",
+  componentId: "sc-1g0k23m-0"
+})([""]);
+const TableCell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
+  displayName: "TableCell",
+  componentId: "sc-1g0k23m-1"
+})(["font-weight:bold;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}", ":not(:focus-within){opacity:", ";}&:hover ", "{opacity:1;}", ":focus-within{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, edsTokens.tokens.colors.interactive.primary__hover.rgba, FilterVisibility, ({
+  $activeFilter
+}) => $activeFilter ? 1 : 0, FilterVisibility, FilterVisibility);
+
 /* istanbul ignore file */
 
 function FilterWrapper({
@@ -189,7 +216,8 @@ function FilterWrapper({
     return value;
   };
   const onChange = react.useCallback(value => column.setFilterValue(value), [column]);
-  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+  return /*#__PURE__*/jsxRuntime.jsxs(FilterVisibility, {
+    onClick: e => e.stopPropagation(),
     children: [/*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Button, {
       "aria-haspopup": true,
       "aria-expanded": open,
@@ -238,28 +266,6 @@ const SortIndicator = ({
   }[column.getIsSorted()] ?? null;
 };
 
-const ResizeInner = styled__default.default.div.withConfig({
-  displayName: "Resizer__ResizeInner",
-  componentId: "sc-plcbjs-0"
-})(["width:2px;opacity:0;height:100%;"]);
-const Resizer = styled__default.default.div.withConfig({
-  displayName: "Resizer",
-  componentId: "sc-plcbjs-1"
-})(["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;z-index:1;"], props => props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none', ResizeInner, props => props.$isResizing ? 1 : 0);
-
-const TableCell = styled__default.default(edsCoreReact.Table.Cell).withConfig({
-  displayName: "TableCell",
-  componentId: "sc-1g0k23m-0"
-})(["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;`;
-  }
-  return '';
-}, p => {
-  if (p.$sticky && p.$pinned) return 'z-index: 13';
-  if (p.$sticky || p.$pinned) return 'z-index: 12';
-}, ResizeInner, edsTokens.tokens.colors.interactive.primary__hover.rgba);
-
 const SortButton = styled__default.default.button.withConfig({
   displayName: "TableHeaderCell__SortButton",
   componentId: "sc-1n0j3v0-0"
@@ -281,6 +287,15 @@ function TableHeaderCell({
   const ctx = useTableContext();
   const table = ctx.table;
   const pinned = header.column.getIsPinned();
+  const isFiltered = header.column.getIsFiltered();
+  const filterValue = header.column.getFilterValue();
+  const hasActiveFilters = react.useMemo(() => {
+    if (!isFiltered) return false;
+    if (Array.isArray(filterValue)) {
+      return filterValue.length > 0 && filterValue.some(v => !!v || v === 0); // avoid empty strings counting
+    }
+    return !!filterValue;
+  }, [isFiltered, filterValue]);
   const canSort = header.column.getCanSort();
   const canFilter = header.column.getCanFilter();
   const offset = react.useMemo(() => {
@@ -311,6 +326,7 @@ function TableHeaderCell({
     $sticky: ctx.stickyHeader,
     $offset: offset,
     $pinned: pinned,
+    $activeFilter: hasActiveFilters,
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     "aria-sort": getSortLabel(header.column.getIsSorted()),
     colSpan: header.colSpan,
@@ -333,8 +349,15 @@ function TableHeaderCell({
     }) : /*#__PURE__*/jsxRuntime.jsx(TableHeaderCellLabel, {
       className: "table-header-cell-label",
       children: reactTable.flexRender(header.column.columnDef.header, header.getContext())
-    }), canFilter && !header.column.columnDef.meta?.customFilterInput ? /*#__PURE__*/jsxRuntime.jsx(FilterWrapper, {
-      column: header.column
+    }), canFilter && !header.column.columnDef.meta?.customFilterInput ?
+    /*#__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
+    jsxRuntime.jsx(FilterVisibility, {
+      onClick: e => e.stopPropagation(),
+      children: /*#__PURE__*/jsxRuntime.jsx(FilterWrapper, {
+        column: header.column
+      })
     }) : null, columnResizeMode && /*#__PURE__*/jsxRuntime.jsx(Resizer, {
       onMouseDown: header.getResizeHandler(),
       onTouchStart: header.getResizeHandler(),
@@ -561,6 +584,8 @@ function EdsDataGridInner({
   selectedRows,
   rowSelectionState,
   enableColumnFiltering,
+  columnFiltersState,
+  onColumnFiltersChange,
   debug,
   enablePagination,
   enableSorting,
@@ -647,6 +672,9 @@ function EdsDataGridInner({
   react.useEffect(() => {
     setVisible(columnVisibility ?? {});
   }, [columnVisibility, setVisible]);
+  react.useEffect(() => {
+    setColumnFilters(columnFiltersState);
+  }, [columnFiltersState]);
   react.useEffect(() => {
     setColumnPin(s => columnPinState ?? s);
   }, [columnPinState]);
@@ -727,6 +755,7 @@ function EdsDataGridInner({
     },
     state: {
       sorting,
+      columnFilters: columnFilters,
       columnPinning: columnPin,
       rowSelection: internalRowSelectionState,
       columnOrder: columnOrderState,
@@ -783,7 +812,7 @@ function EdsDataGridInner({
   if (enableColumnFiltering) {
     options.state.columnFilters = columnFilters;
     options.state.globalFilter = globalFilter;
-    options.onColumnFiltersChange = setColumnFilters;
+    options.onColumnFiltersChange = onColumnFiltersChange ?? setColumnFilters;
     options.onGlobalFilterChange = setGlobalFilter;
     options.getFacetedRowModel = reactTable.getFacetedRowModel();
     options.getFacetedUniqueValues = reactTable.getFacetedUniqueValues();

package/dist/esm/EdsDataGrid.js

@@ -24,6 +24,8 @@ function EdsDataGridInner({
   selectedRows,
   rowSelectionState,
   enableColumnFiltering,
+  columnFiltersState,
+  onColumnFiltersChange,
   debug,
   enablePagination,
   enableSorting,
@@ -110,6 +112,9 @@ function EdsDataGridInner({
   useEffect(() => {
     setVisible(columnVisibility ?? {});
   }, [columnVisibility, setVisible]);
+  useEffect(() => {
+    setColumnFilters(columnFiltersState);
+  }, [columnFiltersState]);
   useEffect(() => {
     setColumnPin(s => columnPinState ?? s);
   }, [columnPinState]);
@@ -190,6 +195,7 @@ function EdsDataGridInner({
     },
     state: {
       sorting,
+      columnFilters: columnFilters,
       columnPinning: columnPin,
       rowSelection: internalRowSelectionState,
       columnOrder: columnOrderState,
@@ -246,7 +252,7 @@ function EdsDataGridInner({
   if (enableColumnFiltering) {
     options.state.columnFilters = columnFilters;
     options.state.globalFilter = globalFilter;
-    options.onColumnFiltersChange = setColumnFilters;
+    options.onColumnFiltersChange = onColumnFiltersChange ?? setColumnFilters;
     options.onGlobalFilterChange = setGlobalFilter;
     options.getFacetedRowModel = getFacetedRowModel();
     options.getFacetedUniqueValues = getFacetedUniqueValues();

package/dist/esm/components/DebouncedInput.js

@@ -28,7 +28,6 @@ function DebouncedInput({
       label: props.placeholder,
       children: /*#__PURE__*/jsx(Input, {
         type: 'number',
-        placeholder: '0',
         value: value,
         onChange: e => setValue(e.target.valueAsNumber)
       })

package/dist/esm/components/FilterWrapper.js

@@ -4,6 +4,7 @@ import { filter_alt_active, filter_alt } from '@equinor/eds-icons';
 import { tokens } from '@equinor/eds-tokens';
 import { Filter } from './Filter.js';
 import { useTableContext } from '../EdsDataGridContext.js';
+import { FilterVisibility } from './TableCell.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 /* istanbul ignore file */
@@ -34,7 +35,8 @@ function FilterWrapper({
     return value;
   };
   const onChange = useCallback(value => column.setFilterValue(value), [column]);
-  return /*#__PURE__*/jsxs("span", {
+  return /*#__PURE__*/jsxs(FilterVisibility, {
+    onClick: e => e.stopPropagation(),
     children: [/*#__PURE__*/jsx(Button, {
       "aria-haspopup": true,
       "aria-expanded": open,

package/dist/esm/components/TableCell.js

@@ -3,10 +3,14 @@ import { tokens } from '@equinor/eds-tokens';
 import styled from 'styled-components';
 import { ResizeInner } from './Resizer.js';
 
+const FilterVisibility = styled.div.withConfig({
+  displayName: "TableCell__FilterVisibility",
+  componentId: "sc-1g0k23m-0"
+})([""]);
 const TableCell = styled(Table.Cell).withConfig({
   displayName: "TableCell",
-  componentId: "sc-1g0k23m-0"
-})(["font-weight:bold;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
+  componentId: "sc-1g0k23m-1"
+})(["font-weight:bold;position:", ";top:0;", " ", ";&:hover ", "{background:", ";opacity:1;}", ":not(:focus-within){opacity:", ";}&:hover ", "{opacity:1;}", ":focus-within{opacity:1;}"], p => p.$sticky || p.$pinned ? 'sticky' : 'relative', p => {
   if (p.$pinned) {
     return `${p.$pinned}: ${p.$offset}px;`;
   }
@@ -14,6 +18,8 @@ const TableCell = styled(Table.Cell).withConfig({
 }, 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);
+}, ResizeInner, tokens.colors.interactive.primary__hover.rgba, FilterVisibility, ({
+  $activeFilter
+}) => $activeFilter ? 1 : 0, FilterVisibility, FilterVisibility);
 
-export { TableCell };
+export { FilterVisibility, TableCell };

package/dist/esm/components/TableHeaderCell.js

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import { FilterWrapper } from './FilterWrapper.js';
 import { SortIndicator } from './SortIndicator.js';
 import { Resizer, ResizeInner } from './Resizer.js';
-import { TableCell } from './TableCell.js';
+import { TableCell, FilterVisibility } from './TableCell.js';
 import styled from 'styled-components';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -29,6 +29,15 @@ function TableHeaderCell({
   const ctx = useTableContext();
   const table = ctx.table;
   const pinned = header.column.getIsPinned();
+  const isFiltered = header.column.getIsFiltered();
+  const filterValue = header.column.getFilterValue();
+  const hasActiveFilters = useMemo(() => {
+    if (!isFiltered) return false;
+    if (Array.isArray(filterValue)) {
+      return filterValue.length > 0 && filterValue.some(v => !!v || v === 0); // avoid empty strings counting
+    }
+    return !!filterValue;
+  }, [isFiltered, filterValue]);
   const canSort = header.column.getCanSort();
   const canFilter = header.column.getCanFilter();
   const offset = useMemo(() => {
@@ -59,6 +68,7 @@ function TableHeaderCell({
     $sticky: ctx.stickyHeader,
     $offset: offset,
     $pinned: pinned,
+    $activeFilter: hasActiveFilters,
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     "aria-sort": getSortLabel(header.column.getIsSorted()),
     colSpan: header.colSpan,
@@ -81,8 +91,15 @@ function TableHeaderCell({
     }) : /*#__PURE__*/jsx(TableHeaderCellLabel, {
       className: "table-header-cell-label",
       children: flexRender(header.column.columnDef.header, header.getContext())
-    }), canFilter && !header.column.columnDef.meta?.customFilterInput ? /*#__PURE__*/jsx(FilterWrapper, {
-      column: header.column
+    }), canFilter && !header.column.columnDef.meta?.customFilterInput ?
+    /*#__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(FilterVisibility, {
+      onClick: e => e.stopPropagation(),
+      children: /*#__PURE__*/jsx(FilterWrapper, {
+        column: header.column
+      })
     }) : null, columnResizeMode && /*#__PURE__*/jsx(Resizer, {
       onMouseDown: header.getResizeHandler(),
       onTouchStart: header.getResizeHandler(),

package/dist/types/EdsDataGrid.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ForwardedRef } from 'react';
 import { EdsDataGridProps } from './EdsDataGridProps';
-declare function EdsDataGridInner<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, selectedRows, rowSelectionState, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, stickyFooter, onSelectRow, onRowSelectionChange, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, footerClass, footerStyle, externalPaginator, onSortingChange, manualSorting, sortingState, columnPinState, scrollbarHorizontal, width, minWidth, height, getRowId, rowVirtualizerInstanceRef, tableInstanceRef, columnSizing, onColumnResize, expansionState, setExpansionState, getSubRows, defaultColumn, onRowContextMenu, onRowClick, onRowDoubleClick, onCellClick, enableFooter, enableSortingRemoval, ...rest }: EdsDataGridProps<T> & HTMLAttributes<HTMLDivElement>, ref: ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function EdsDataGridInner<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, selectedRows, rowSelectionState, enableColumnFiltering, columnFiltersState, onColumnFiltersChange, debug, enablePagination, enableSorting, stickyHeader, stickyFooter, onSelectRow, onRowSelectionChange, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, footerClass, footerStyle, externalPaginator, onSortingChange, manualSorting, sortingState, columnPinState, scrollbarHorizontal, width, minWidth, height, getRowId, rowVirtualizerInstanceRef, tableInstanceRef, columnSizing, onColumnResize, expansionState, setExpansionState, getSubRows, defaultColumn, onRowContextMenu, onRowClick, onRowDoubleClick, onCellClick, enableFooter, enableSortingRemoval, ...rest }: EdsDataGridProps<T> & HTMLAttributes<HTMLDivElement>, ref: ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export declare const EdsDataGrid: <T>(props: EdsDataGridProps<T> & HTMLAttributes<HTMLDivElement> & {
     ref?: ForwardedRef<HTMLDivElement>;
 }) => ReturnType<typeof EdsDataGridInner>;

package/dist/types/EdsDataGridProps.d.ts

@@ -1,4 +1,4 @@
-import { Cell, Column, ColumnDef, ColumnPinningState, ColumnResizeMode, ColumnSizingState, ExpandedState, OnChangeFn, Row, RowSelectionState, SortingState, Table, TableOptions } from '@tanstack/react-table';
+import { Cell, Column, ColumnDef, ColumnFilter, ColumnPinningState, ColumnResizeMode, ColumnSizingState, ExpandedState, OnChangeFn, Row, RowSelectionState, SortingState, Table, TableOptions } from '@tanstack/react-table';
 import { Virtualizer } from '@tanstack/react-virtual';
 import { CSSProperties, MouseEvent, MutableRefObject, ReactElement } from 'react';
 type BaseProps<T> = {
@@ -184,6 +184,16 @@ type FilterProps = {
      * @default false
      */
     enableColumnFiltering?: boolean;
+    /**
+     * Initial filter state
+     * @default undefined
+     */
+    columnFiltersState?: Array<ColumnFilter>;
+    /**
+     * Callback for when the filter state changes
+     * @default undefined
+     */
+    onColumnFiltersChange?: OnChangeFn<Array<ColumnFilter>>;
 };
 type HandlersProps<T> = {
     /**

package/dist/types/components/TableCell.d.ts

@@ -1,4 +1,5 @@
 import { ColumnPinningPosition } from '@tanstack/react-table';
+export declare const FilterVisibility: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<{
     variant?: import("@equinor/eds-core-react/dist/types/components/Table/Table.types").Variants;
     color?: import("@equinor/eds-core-react/dist/types/components/Table/Table.types").Colors;
@@ -15,4 +16,5 @@ export declare const TableCell: import("styled-components/dist/types").IStyledCo
     $sticky: boolean;
     $pinned: ColumnPinningPosition;
     $offset: number;
+    $activeFilter?: boolean;
 }>> & string & Omit<import("react").ForwardRefExoticComponent<import("@equinor/eds-core-react").CellProps & import("react").RefAttributes<HTMLTableCellElement>>, keyof import("react").Component<any, {}, any>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-data-grid-react",
-  "version": "0.7.7",
+  "version": "0.8.0",
   "description": "A feature-rich data-grid written in React, implementing the Equinor Design System",
   "license": "MIT",
   "types": "dist/types/index.d.ts",
@@ -63,7 +63,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^8.6.12",
     "styled-components": "6.1.17",
-    "ts-jest": "29.3.1",
+    "ts-jest": "29.3.2",
     "ts-node": "10.9.2",
     "tsc-watch": "^6.2.1",
     "typescript": "~5.8.3"