@equinor/eds-data-grid-react/dist/esm/components/Filter.js

A feature-rich data-grid written in React, implementing the Equinor Design System

import { useMemo } from 'react';
import { DebouncedInput } from './DebouncedInput.js';
import styled from 'styled-components';
import { jsxs, jsx } from 'react/jsx-runtime';

/* istanbul ignore file */

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 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(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'
  });
}

export { Filter };