@equinor/eds-data-grid-react 0.7.6 → 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(jsxRuntime.Fragment, {
+  return /*#__PURE__*/jsxRuntime.jsxs(FilterVisibility, {
+    onClick: e => e.stopPropagation(),
     children: [/*#__PURE__*/jsxRuntime.jsx(edsCoreReact.Button, {
       "aria-haspopup": true,
       "aria-expanded": open,
@@ -238,28 +266,14 @@ 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;"], 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"
+})(["cursor:pointer;height:100%;width:calc(100% - 5px);display:flex;flex-direction:row;align-items:center;background:transparent;border:none;padding-left:var(--eds_table__cell__padding_x,16px);padding-right:var(--eds_table__cell__padding_x,16px);margin:0;outline:none;color:inherit;text-align:left;font:inherit;"]);
+const TableHeaderCellLabel = styled__default.default.div.withConfig({
+  displayName: "TableHeaderCell__TableHeaderCellLabel",
+  componentId: "sc-1n0j3v0-1"
+})(["display:flex;flex-direction:column;"]);
 const getSortLabel = sorted => {
   if (sorted) {
     return `${sorted}ending`;
@@ -273,12 +287,32 @@ 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(() => {
     if (!pinned) {
       return null;
     }
     return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - header.getSize();
   }, [pinned, header, table]);
+  const tableCellPadding = react.useMemo(() => {
+    if (canSort && canFilter) {
+      return '0 var(--eds_table__cell__padding_x, 16px) 0 0';
+    }
+    if (canSort) {
+      return '0';
+    }
+    return '0 var(--eds_table__cell__padding_x, 16px) 0 var(--eds_table__cell__padding_x, 16px)';
+  }, [canSort, canFilter]);
   return header.isPlaceholder ? /*#__PURE__*/jsxRuntime.jsx(TableCell, {
     $sticky: ctx.stickyHeader,
     $offset: offset,
@@ -292,39 +326,39 @@ function TableHeaderCell({
     $sticky: ctx.stickyHeader,
     $offset: offset,
     $pinned: pinned,
+    $activeFilter: hasActiveFilters,
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     "aria-sort": getSortLabel(header.column.getIsSorted()),
-    onClick: header.column.getToggleSortingHandler(),
     colSpan: header.colSpan,
     style: {
       width: header.getSize(),
       verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
-      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
+      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
+      padding: tableCellPadding
     },
-    children: [/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        style: {
-          display: 'flex',
-          flexDirection: 'column'
-        },
-        children: /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "table-header-cell-label",
-          children: reactTable.flexRender(header.column.columnDef.header, header.getContext())
-        })
+    children: [canSort ? /*#__PURE__*/jsxRuntime.jsxs(SortButton, {
+      tabIndex: -1,
+      onClick: header.column.getToggleSortingHandler(),
+      "data-testid": `sort-button-${header.id}`,
+      children: [/*#__PURE__*/jsxRuntime.jsx(TableHeaderCellLabel, {
+        className: "table-header-cell-label",
+        children: reactTable.flexRender(header.column.columnDef.header, header.getContext())
       }), !header.column.columnDef.meta?.customFilterInput && /*#__PURE__*/jsxRuntime.jsx(SortIndicator, {
         column: header.column
-      }), header.column.getCanFilter() && !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("div", {
-        onClick: e => e.stopPropagation(),
-        children: /*#__PURE__*/jsxRuntime.jsx(FilterWrapper, {
-          column: header.column
-        })
-      }) : null]
-    }), columnResizeMode && /*#__PURE__*/jsxRuntime.jsx(Resizer, {
+      })]
+    }) : /*#__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__*/
+    // 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(),
       $isResizing: header.column.getIsResizing(),
@@ -550,6 +584,8 @@ function EdsDataGridInner({
   selectedRows,
   rowSelectionState,
   enableColumnFiltering,
+  columnFiltersState,
+  onColumnFiltersChange,
   debug,
   enablePagination,
   enableSorting,
@@ -636,6 +672,9 @@ function EdsDataGridInner({
   react.useEffect(() => {
     setVisible(columnVisibility ?? {});
   }, [columnVisibility, setVisible]);
+  react.useEffect(() => {
+    setColumnFilters(columnFiltersState);
+  }, [columnFiltersState]);
   react.useEffect(() => {
     setColumnPin(s => columnPinState ?? s);
   }, [columnPinState]);
@@ -716,6 +755,7 @@ function EdsDataGridInner({
     },
     state: {
       sorting,
+      columnFilters: columnFilters,
       columnPinning: columnPin,
       rowSelection: internalRowSelectionState,
       columnOrder: columnOrderState,
@@ -772,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();
@@ -965,6 +1005,7 @@ function EdsDataGridInner({
           }, footerGroup.id))
         })]
       }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "table-pagination",
         style: {
           maxWidth: `${table.getTotalSize()}px`
         },

package/dist/esm/EdsDataGrid.js

@@ -1,5 +1,5 @@
-import { Typography, useEds, Table, Pagination } from '@equinor/eds-core-react';
-import { getExpandedRowModel, getCoreRowModel, getSortedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getFilteredRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
+import { useEds, Table, Pagination, Typography } from '@equinor/eds-core-react';
+import { getSortedRowModel, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getFilteredRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { forwardRef, useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import styled from 'styled-components';
@@ -9,7 +9,7 @@ import { TableFooterRow } from './components/TableFooterRow.js';
 import { TableRow } from './components/TableRow.js';
 import { addPxSuffixIfInputHasNoPrefix, logDevelopmentWarningOfPropUse } from './utils.js';
 import { mergeRefs } from '@equinor/eds-utils';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 function EdsDataGridInner({
@@ -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();
@@ -439,6 +445,7 @@ function EdsDataGridInner({
           }, footerGroup.id))
         })]
       }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsx("div", {
+        className: "table-pagination",
         style: {
           maxWidth: `${table.getTotalSize()}px`
         },

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,7 +4,8 @@ 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 { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+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(Fragment, {
+  return /*#__PURE__*/jsxs(FilterVisibility, {
+    onClick: e => e.stopPropagation(),
     children: [/*#__PURE__*/jsx(Button, {
       "aria-haspopup": true,
       "aria-expanded": open,

package/dist/esm/components/Resizer.js

@@ -7,6 +7,6 @@ const ResizeInner = styled.div.withConfig({
 const Resizer = styled.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;"], props => props.$columnResizeMode === 'onEnd' ? 'translateX(0px)' : 'none', ResizeInner, props => props.$isResizing ? 1 : 0);
+})(["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);
 
 export { ResizeInner, Resizer };

package/dist/esm/components/SortIndicator.js

@@ -1,5 +1,5 @@
 import { Icon } from '@equinor/eds-core-react';
-import { arrow_up, arrow_down } from '@equinor/eds-icons';
+import { arrow_down, arrow_up } from '@equinor/eds-icons';
 import { jsx } from 'react/jsx-runtime';
 
 const SortIndicator = ({

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,9 +4,18 @@ 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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { TableCell, FilterVisibility } from './TableCell.js';
+import styled from 'styled-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
+const SortButton = styled.button.withConfig({
+  displayName: "TableHeaderCell__SortButton",
+  componentId: "sc-1n0j3v0-0"
+})(["cursor:pointer;height:100%;width:calc(100% - 5px);display:flex;flex-direction:row;align-items:center;background:transparent;border:none;padding-left:var(--eds_table__cell__padding_x,16px);padding-right:var(--eds_table__cell__padding_x,16px);margin:0;outline:none;color:inherit;text-align:left;font:inherit;"]);
+const TableHeaderCellLabel = styled.div.withConfig({
+  displayName: "TableHeaderCell__TableHeaderCellLabel",
+  componentId: "sc-1n0j3v0-1"
+})(["display:flex;flex-direction:column;"]);
 const getSortLabel = sorted => {
   if (sorted) {
     return `${sorted}ending`;
@@ -20,12 +29,32 @@ 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(() => {
     if (!pinned) {
       return null;
     }
     return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - header.getSize();
   }, [pinned, header, table]);
+  const tableCellPadding = useMemo(() => {
+    if (canSort && canFilter) {
+      return '0 var(--eds_table__cell__padding_x, 16px) 0 0';
+    }
+    if (canSort) {
+      return '0';
+    }
+    return '0 var(--eds_table__cell__padding_x, 16px) 0 var(--eds_table__cell__padding_x, 16px)';
+  }, [canSort, canFilter]);
   return header.isPlaceholder ? /*#__PURE__*/jsx(TableCell, {
     $sticky: ctx.stickyHeader,
     $offset: offset,
@@ -39,39 +68,39 @@ function TableHeaderCell({
     $sticky: ctx.stickyHeader,
     $offset: offset,
     $pinned: pinned,
+    $activeFilter: hasActiveFilters,
     className: ctx.headerClass ? ctx.headerClass(header.column) : '',
     "aria-sort": getSortLabel(header.column.getIsSorted()),
-    onClick: header.column.getToggleSortingHandler(),
     colSpan: header.colSpan,
     style: {
       width: header.getSize(),
       verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
-      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
+      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {}),
+      padding: tableCellPadding
     },
-    children: [/*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx("div", {
-        style: {
-          display: 'flex',
-          flexDirection: 'column'
-        },
-        children: /*#__PURE__*/jsx("span", {
-          className: "table-header-cell-label",
-          children: flexRender(header.column.columnDef.header, header.getContext())
-        })
+    children: [canSort ? /*#__PURE__*/jsxs(SortButton, {
+      tabIndex: -1,
+      onClick: header.column.getToggleSortingHandler(),
+      "data-testid": `sort-button-${header.id}`,
+      children: [/*#__PURE__*/jsx(TableHeaderCellLabel, {
+        className: "table-header-cell-label",
+        children: flexRender(header.column.columnDef.header, header.getContext())
       }), !header.column.columnDef.meta?.customFilterInput && /*#__PURE__*/jsx(SortIndicator, {
         column: header.column
-      }), header.column.getCanFilter() && !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("div", {
-        onClick: e => e.stopPropagation(),
-        children: /*#__PURE__*/jsx(FilterWrapper, {
-          column: header.column
-        })
-      }) : null]
-    }), columnResizeMode && /*#__PURE__*/jsx(Resizer, {
+      })]
+    }) : /*#__PURE__*/jsx(TableHeaderCellLabel, {
+      className: "table-header-cell-label",
+      children: flexRender(header.column.columnDef.header, header.getContext())
+    }), 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(),
       $isResizing: header.column.getIsResizing(),

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.6",
+  "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",
@@ -20,53 +20,53 @@
     "styled-components": ">=5.1"
   },
   "dependencies": {
-    "@tanstack/react-table": "^8.20.6",
-    "@tanstack/react-virtual": "^3.13.2",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.6",
     "@equinor/eds-icons": "^0.22.0",
-    "@equinor/eds-utils": "^0.8.7",
-    "@equinor/eds-tokens": "0.9.2"
+    "@equinor/eds-tokens": "0.9.2",
+    "@equinor/eds-utils": "^0.8.7"
   },
   "devDependencies": {
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-actions": "^8.4.7",
-    "@storybook/addon-docs": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/preview-api": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/preview-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "16.3.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.13.14",
+    "@types/node": "^22.15.3",
     "@types/ramda": "^0.30.2",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
     "babel-plugin-styled-components": "^2.1.4",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-styled-components": "^7.2.0",
     "js-file-download": "^0.4.12",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.3",
     "ramda": "^0.30.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.54.2",
-    "rollup": "^4.29.1",
-    "rollup-plugin-delete": "^2.1.0",
+    "react-hook-form": "^7.56.1",
+    "rollup": "^4.40.1",
+    "rollup-plugin-delete": "^2.2.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.4.7",
+    "storybook": "^8.6.12",
     "styled-components": "6.1.17",
-    "ts-jest": "29.2.5",
+    "ts-jest": "29.3.2",
     "ts-node": "10.9.2",
     "tsc-watch": "^6.2.1",
-    "typescript": "~5.8.2"
+    "typescript": "~5.8.3"
   },
   "homepage": "https://eds.equinor.com",
   "repository": {