ui-soxo-bootstrap-core 2.6.62-dev.4 → 2.6.63-dev.0

package/core/lib/components/index.js

@@ -56,6 +56,14 @@ import TableWrapper from './table-wrapper/table-wrapper'
 
 import TableComponent from '../elements/basic/table/table'
 
+import {
+  withColumnFilters,
+  applyColumnFilters,
+  hasColumnFilters,
+  getColumnFilterValue,
+  ColumnFilterDropdown,
+} from '../elements/basic/table/column-filter/column-filter'
+
 import CustomActions from '../models/actions/components/custom-actions/custom-actions'
 
 // Generic Components Ends
@@ -154,6 +162,11 @@ export {
 
   TableWrapper,
   TableComponent,
+  withColumnFilters,
+  applyColumnFilters,
+  hasColumnFilters,
+  getColumnFilterValue,
+  ColumnFilterDropdown,
   CustomActions,
 
   // Generic Components Ends

package/core/lib/elements/basic/table/column-filter/column-filter.js

@@ -0,0 +1,299 @@
+/**
+ * Excel style column filter for tables
+ *
+ * Each filterable column gets a dropdown listing the distinct values of that column,
+ * where one or more values can be picked (with Select All / Clear All). Filters of
+ * multiple columns can be active at the same time, a record is shown only when it
+ * matches the filter of every column.
+ *
+ * The values are the text shown in the cell, read from the column render (or the
+ * exportDefinition when the cell is a component, ex: status dropdowns), else the
+ * dataIndex value of the record.
+ *
+ * A column is left out with `filterable: false`.
+ */
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { Checkbox, Input, Empty } from 'antd';
+
+import { FilterFilled } from '@ant-design/icons';
+
+import { useTranslation } from 'react-i18next';
+
+import Button from '../../button/button';
+
+import './column-filter.scss';
+
+/**
+ * Text of a rendered cell, ex: <Tag>Male</Tag> gives Male
+ *
+ * @param {*} node
+ * @returns {string}
+ */
+function nodeToText(node) {
+  if (node === null || node === undefined || typeof node === 'boolean') return '';
+
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+
+  if (Array.isArray(node)) return node.map(nodeToText).join('');
+
+  if (React.isValidElement(node)) return nodeToText(node.props.children);
+
+  return '';
+}
+
+/**
+ * Value of the dataIndex in the record, dataIndex can be a path array
+ *
+ * @param {Object} record
+ * @param {string|Array} dataIndex
+ * @returns {*}
+ */
+function getDataIndexValue(record, dataIndex) {
+  const path = Array.isArray(dataIndex) ? dataIndex : [dataIndex];
+
+  return path.reduce((value, key) => (value === null || value === undefined ? value : value[key]), record);
+}
+
+/**
+ * Key the filter of the column is stored against
+ *
+ * @param {Object} column
+ * @returns {string}
+ */
+export function getColumnFilterKey(column) {
+  if (column.key !== undefined && column.key !== null) return String(column.key);
+
+  if (column.dataIndex !== undefined && column.dataIndex !== null) return [].concat(column.dataIndex).join('.');
+
+  return undefined;
+}
+
+/**
+ * Value of the column for the record, used to list and match the filter values
+ *
+ * @param {Object} column
+ * @param {Object} record
+ * @returns {string}
+ */
+export function getColumnFilterValue(column, record) {
+  let text = '';
+
+  try {
+    const value = column.dataIndex !== undefined ? getDataIndexValue(record, column.dataIndex) : record;
+
+    text = column.render ? nodeToText(column.render(value, record, 0)) : nodeToText(value);
+
+    // Cells rendered as a component (ex: status change) have no text, use the export value
+    if (!text && column.exportDefinition) text = nodeToText(column.exportDefinition(record));
+  } catch (error) {
+    text = '';
+  }
+
+  return String(text).replace(/\s+/g, ' ').trim();
+}
+
+/**
+ * Whether the column can be filtered
+ *
+ * @param {Object} column
+ * @returns {boolean}
+ */
+export function isFilterableColumn(column) {
+  if (column.filterable === false) return false;
+
+  return !!getColumnFilterKey(column) && !!(column.render || column.exportDefinition || column.dataIndex !== undefined);
+}
+
+/**
+ * Records matching the filter of every column
+ *
+ * @param {Array} records
+ * @param {Array} columns
+ * @param {Object} filters - Selected values against the column key, ex: { gender: ['Male'] }
+ * @param {string} exceptKey - Key of the column to leave out (to list the values of that column)
+ * @returns {Array}
+ */
+export function applyColumnFilters(records = [], columns = [], filters = {}, exceptKey) {
+  const active = columns.filter((column) => {
+    const key = getColumnFilterKey(column);
+
+    return key !== exceptKey && isFilterableColumn(column) && Array.isArray(filters[key]);
+  });
+
+  if (!active.length) return records;
+
+  return records.filter((record) => active.every((column) => filters[getColumnFilterKey(column)].includes(getColumnFilterValue(column, record))));
+}
+
+/**
+ * Whether any column filter is applied
+ *
+ * @param {Object} filters
+ * @returns {boolean}
+ */
+export function hasColumnFilters(filters = {}) {
+  return Object.values(filters || {}).some((values) => Array.isArray(values));
+}
+
+/**
+ * Distinct values of the column in the records, sorted
+ *
+ * @param {Object} column
+ * @param {Array} records
+ * @returns {Array<string>}
+ */
+export function getColumnValues(column, records = []) {
+  const values = new Set(records.map((record) => getColumnFilterValue(column, record)));
+
+  return [...values].sort((a, b) => {
+    // Blanks are listed at the end
+    if (!a) return 1;
+    if (!b) return -1;
+
+    return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+  });
+}
+
+/**
+ * Dropdown with the values of the column
+ *
+ * @param {Object} column - Column being filtered
+ * @param {Array} records - Records to list the values from
+ * @param {Array} applied - Values applied now, undefined when the column is not filtered
+ * @param {Function} onApply - Called with the selected values, undefined to remove the filter
+ * @param {Function} close - Closes the dropdown
+ * @param {boolean} visible - Whether the dropdown is open
+ */
+export function ColumnFilterDropdown({ column, records, applied, onApply, close, visible }) {
+  const { t } = useTranslation();
+
+  const [search, setSearch] = useState('');
+
+  const [selected, setSelected] = useState([]);
+
+  const options = useMemo(() => (visible ? getColumnValues(column, records) : []), [visible, column, records]);
+
+  // Every time the dropdown opens start from the applied filter, all values are selected when there is no filter
+  useEffect(() => {
+    if (visible) {
+      setSearch('');
+      setSelected(applied ? applied : options);
+    }
+  }, [visible]);
+
+  const visibleOptions = options.filter((value) => (value || t('(Blanks)')).toLowerCase().includes(search.trim().toLowerCase()));
+
+  const selectedVisible = visibleOptions.filter((value) => selected.includes(value));
+
+  const allSelected = visibleOptions.length > 0 && selectedVisible.length === visibleOptions.length;
+
+  /**
+   * Select / unselect all the listed values
+   */
+  function onSelectAll(event) {
+    if (event.target.checked) {
+      setSelected([...new Set([...selected, ...visibleOptions])]);
+    } else {
+      setSelected(selected.filter((value) => !visibleOptions.includes(value)));
+    }
+  }
+
+  function onToggle(value, checked) {
+    setSelected(checked ? [...selected, value] : selected.filter((ele) => ele !== value));
+  }
+
+  /**
+   * Apply the selected values, selecting every value removes the filter of the column
+   */
+  function onOk() {
+    const isEveryValue = options.every((value) => selected.includes(value));
+
+    onApply(isEveryValue ? undefined : options.filter((value) => selected.includes(value)));
+
+    // close() instead of confirm(), confirm makes antd reset the pagination to the first page
+    if (close) close();
+  }
+
+  return (
+    <div className="column-filter-dropdown" onKeyDown={(event) => event.stopPropagation()}>
+      <Input
+        size="small"
+        allowClear
+        placeholder={t('Search')}
+        value={search}
+        onChange={(event) => setSearch(event.target.value)}
+        className="column-filter-search"
+      />
+
+      {visibleOptions.length ? (
+        <>
+          <Checkbox
+            className="column-filter-select-all"
+            checked={allSelected}
+            indeterminate={selectedVisible.length > 0 && !allSelected}
+            onChange={onSelectAll}
+          >
+            {t('Select All')}
+          </Checkbox>
+
+          <div className="column-filter-options">
+            {visibleOptions.map((value) => (
+              <Checkbox key={value || '__blank__'} checked={selected.includes(value)} onChange={(event) => onToggle(value, event.target.checked)}>
+                {value || t('(Blanks)')}
+              </Checkbox>
+            ))}
+          </div>
+        </>
+      ) : (
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('No values')} />
+      )}
+
+      <div className="column-filter-actions">
+        <Button size="small" type="secondary" onClick={() => setSelected([])}>
+          {t('Clear All')}
+        </Button>
+
+        <Button size="small" type="primary" disabled={!selected.length} onClick={onOk}>
+          {t('OK')}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Add the Excel style filter to the columns
+ *
+ * @param {Array} columns
+ * @param {Array} records - Records the values are listed from
+ * @param {Object} filters - Applied filters against the column key
+ * @param {Function} onChange - Called with the column key and the selected values (undefined to remove)
+ * @returns {Array}
+ */
+export function withColumnFilters(columns = [], records = [], filters = {}, onChange) {
+  return columns.map((column) => {
+    if (!isFilterableColumn(column)) return column;
+
+    const key = getColumnFilterKey(column);
+
+    const applied = filters[key];
+
+    return {
+      ...column,
+      filteredValue: applied || null,
+      filterIcon: () => <FilterFilled className={`column-filter-icon ${applied ? 'column-filter-icon--active' : ''}`} />,
+      filterDropdown: ({ close, visible }) => (
+        <ColumnFilterDropdown
+          column={column}
+          // Values are listed from the records matching the filters of the other columns
+          records={applyColumnFilters(records, columns, filters, key)}
+          applied={applied}
+          visible={visible}
+          close={close}
+          onApply={(values) => onChange(key, values)}
+        />
+      ),
+    };
+  });
+}

package/core/lib/elements/basic/table/column-filter/column-filter.scss

@@ -0,0 +1,48 @@
+/* Excel style column filter of the table */
+
+.column-filter-dropdown {
+  width: 240px;
+  padding: 8px;
+
+  .column-filter-search {
+    margin-bottom: 8px;
+  }
+
+  .column-filter-select-all {
+    width: 100%;
+    padding: 4px 0 6px;
+    border-bottom: 1px solid #f0f0f0;
+    font-weight: 600;
+  }
+
+  .column-filter-options {
+    display: flex;
+    flex-direction: column;
+    max-height: 220px;
+    padding: 6px 0;
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    .ant-checkbox-wrapper {
+      margin: 0;
+      padding: 3px 0;
+      word-break: break-word;
+    }
+  }
+
+  .column-filter-actions {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    padding-top: 8px;
+    border-top: 1px solid #f0f0f0;
+  }
+}
+
+.column-filter-icon {
+  color: #bfbfbf;
+
+  &--active {
+    color: #1677ff;
+  }
+}

package/core/lib/elements/basic/table/column-filter/column-filter.test.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import {
+  getColumnFilterKey,
+  getColumnFilterValue,
+  isFilterableColumn,
+  applyColumnFilters,
+  hasColumnFilters,
+  getColumnValues,
+  withColumnFilters,
+  ColumnFilterDropdown,
+} from './column-filter';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (text) => text }),
+}));
+
+// The core Button reads the theme from the global store, a plain button is enough here
+jest.mock('../../button/button', () => ({ children, onClick, disabled }) => (
+  <button type="button" onClick={onClick} disabled={disabled}>
+    {children}
+  </button>
+));
+
+const genderColumn = { key: 'gender', title: 'Gender', render: (record) => <span>{record.gender}</span> };
+
+const cityColumn = { key: 'city', title: 'City', dataIndex: ['address', 'city'] };
+
+const statusColumn = { key: 'status', title: 'Status', render: () => <select />, exportDefinition: (record) => record.status };
+
+const records = [
+  { id: 1, gender: 'Male', address: { city: 'Calicut' }, status: 'Booked' },
+  { id: 2, gender: 'Female', address: { city: 'Kochi' }, status: 'Arrived' },
+  { id: 3, gender: 'Male', address: { city: 'Kochi' }, status: 'Booked' },
+  { id: 4, gender: '', address: { city: 'Calicut' }, status: 'Arrived' },
+];
+
+describe('column filter helpers', () => {
+  it('reads the rendered text of the cell', () => {
+    expect(getColumnFilterValue(genderColumn, records[0])).toBe('Male');
+  });
+
+  it('reads the dataIndex value, path arrays included', () => {
+    expect(getColumnFilterValue(cityColumn, records[1])).toBe('Kochi');
+  });
+
+  it('falls back to the export value when the cell has no text', () => {
+    expect(getColumnFilterValue(statusColumn, records[1])).toBe('Arrived');
+  });
+
+  it('keys the filter by key, else by dataIndex', () => {
+    expect(getColumnFilterKey({ dataIndex: ['address', 'city'] })).toBe('address.city');
+    expect(getColumnFilterKey({ key: 'gender', dataIndex: 'x' })).toBe('gender');
+  });
+
+  it('leaves out columns marked filterable false or without a value', () => {
+    expect(isFilterableColumn(genderColumn)).toBe(true);
+    expect(isFilterableColumn({ ...genderColumn, filterable: false })).toBe(false);
+    expect(isFilterableColumn({ key: 'empty', title: 'Empty' })).toBe(false);
+  });
+
+  it('keeps only the records matching every filtered column', () => {
+    const columns = [genderColumn, cityColumn];
+
+    expect(applyColumnFilters(records, columns, { gender: ['Male'] }).map((r) => r.id)).toEqual([1, 3]);
+    expect(applyColumnFilters(records, columns, { gender: ['Male'], city: ['Kochi'] }).map((r) => r.id)).toEqual([3]);
+    expect(applyColumnFilters(records, columns, {})).toBe(records);
+  });
+
+  it('ignores the excepted column, to list its values from the other filters', () => {
+    const columns = [genderColumn, cityColumn];
+
+    expect(applyColumnFilters(records, columns, { gender: ['Male'], city: ['Kochi'] }, 'city').map((r) => r.id)).toEqual([1, 3]);
+  });
+
+  it('tells whether any filter is applied', () => {
+    expect(hasColumnFilters({})).toBe(false);
+    expect(hasColumnFilters({ gender: undefined })).toBe(false);
+    expect(hasColumnFilters({ gender: ['Male'] })).toBe(true);
+  });
+
+  it('lists distinct values sorted with blanks last', () => {
+    expect(getColumnValues(genderColumn, records)).toEqual(['Female', 'Male', '']);
+  });
+
+  it('adds the filter dropdown only to filterable columns', () => {
+    const columns = withColumnFilters([{ key: '#', filterable: false, render: () => 1 }, genderColumn], records, { gender: ['Male'] }, jest.fn());
+
+    expect(columns[0].filterDropdown).toBeUndefined();
+    expect(columns[1].filterDropdown).toBeInstanceOf(Function);
+    expect(columns[1].filteredValue).toEqual(['Male']);
+  });
+});
+
+describe('ColumnFilterDropdown', () => {
+  function renderDropdown(props = {}) {
+    const onApply = jest.fn();
+    const close = jest.fn();
+
+    render(<ColumnFilterDropdown column={genderColumn} records={records} visible onApply={onApply} close={close} {...props} />);
+
+    return { onApply, close };
+  }
+
+  it('lists every value ticked when the column has no filter, blanks labelled', () => {
+    renderDropdown();
+
+    ['Female', 'Male', '(Blanks)'].forEach((label) => expect(screen.getByLabelText(label)).toBeChecked());
+  });
+
+  it('applies the picked values and closes', () => {
+    const { onApply, close } = renderDropdown();
+
+    fireEvent.click(screen.getByLabelText('Female'));
+    fireEvent.click(screen.getByText('OK'));
+
+    expect(onApply).toHaveBeenCalledWith(['Male', '']);
+    expect(close).toHaveBeenCalled();
+  });
+
+  it('removes the filter when every value is selected', () => {
+    const { onApply } = renderDropdown({ applied: ['Male'] });
+
+    fireEvent.click(screen.getByLabelText('Select All'));
+    fireEvent.click(screen.getByText('OK'));
+
+    expect(onApply).toHaveBeenCalledWith(undefined);
+  });
+
+  it('Clear All unticks everything and disables OK', () => {
+    renderDropdown();
+
+    fireEvent.click(screen.getByText('Clear All'));
+
+    expect(screen.getByLabelText('Male')).not.toBeChecked();
+    expect(screen.getByText('OK').closest('button')).toBeDisabled();
+  });
+
+  it('narrows the list with the search', () => {
+    renderDropdown();
+
+    fireEvent.change(screen.getByPlaceholderText('Search'), { target: { value: 'fem' } });
+
+    expect(screen.getByLabelText('Female')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Male')).not.toBeInTheDocument();
+  });
+});

package/core/lib/elements/basic/table/readme.md

@@ -6,4 +6,53 @@ Here is how we can simply add a table.
 import Table from "./table";
 
 <Table />;
-```
+```
+
+## Column filters
+
+`columnFilters` adds an Excel style filter to every column header: the distinct values of
+the column with Search, Select All / Clear All and a "(Blanks)" option. Filters of several
+columns work together, and the values listed for a column are the ones left by the other
+filters.
+
+The values are the text shown in the cell (the column `render`), the `exportDefinition`
+when the cell is a component, else the `dataIndex` value. Leave a column out with
+`filterable: false`, or pass the keys of the columns to filter:
+
+```jsx
+<TableComponent columns={columns} dataSource={rows} columnFilters={['gender', 'source']} />
+```
+
+### Filtered by the table
+
+When the whole list is in `dataSource`, the table filters it:
+
+```jsx
+<TableComponent columns={columns} dataSource={rows} columnFilters />
+```
+
+### Filtered by the screen
+
+With server side paging the screen keeps the filters and filters the data itself:
+
+```jsx
+import { TableComponent, applyColumnFilters, hasColumnFilters } from 'ui-soxo-bootstrap-core';
+
+const [filters, setFilters] = useState({});
+
+const rows = applyColumnFilters(records, columns, filters);
+
+<TableComponent
+  columns={columns}
+  dataSource={rows}
+  columnFilters
+  filters={filters}
+  onFilterChange={(key, values) => setFilters({ ...filters, [key]: values })}
+  // Records the values are listed from, the dataSource when not given
+  filterRecords={records}
+/>;
+```
+
+`onFilterChange` gets the column key and the selected values, `undefined` when the filter
+is removed (every value selected). `hasColumnFilters(filters)` tells whether any filter is
+applied, ex: to load the whole range instead of one page.

package/core/lib/elements/basic/table/table.js

@@ -1,7 +1,8 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Table } from 'antd';
 import PropTypes from 'prop-types';
 import { GlobalContext } from '../../../Store';
+import { withColumnFilters, applyColumnFilters, getColumnFilterKey } from './column-filter/column-filter';
 
 import './table.scss';
 
@@ -12,9 +13,55 @@ import './table.scss';
  * use it for long lists only. The header cells stay inside the same table as the rows
  * (see table.scss), so the columns always line up with the header.
  */
-const TableComponent = ({ columns, dataSource, loading, fixed, scroll, summary, pagination, title, onChange, freezeHeader }) => {
+const TableComponent = ({
+  columns,
+  dataSource,
+  loading,
+  fixed,
+  scroll,
+  summary,
+  pagination,
+  title,
+  onChange,
+  freezeHeader,
+  // Excel style filter - true for every column (a column is left out with `filterable: false`), or the keys of the columns to filter
+  columnFilters = false,
+  // Applied filters ({ [columnKey]: values }), when the screen filters the data itself (ex: server side paging)
+  filters,
+  // Called with the column key and the selected values (undefined when the filter is removed)
+  onFilterChange,
+  // Records the filter values are listed from, the dataSource when not given
+  filterRecords,
+}) => {
   const { state } = useContext(GlobalContext);
 
+  const [localFilters, setLocalFilters] = useState({});
+
+  // Controlled when the screen passes the filters, else the table filters its own dataSource
+  const isControlled = filters !== undefined;
+
+  const appliedFilters = isControlled ? filters || {} : localFilters;
+
+  const filterSource = filterRecords || dataSource || [];
+
+  // With a list of keys only those columns get the filter
+  const filterColumns = Array.isArray(columnFilters)
+    ? columns.map((col) => (columnFilters.includes(getColumnFilterKey(col)) ? col : { ...col, filterable: false }))
+    : columns;
+
+  const filteredColumns = columnFilters
+    ? withColumnFilters(filterColumns, filterSource, appliedFilters, (key, values) => {
+        if (!isControlled) setLocalFilters((current) => ({ ...current, [key]: values }));
+
+        if (onFilterChange) onFilterChange(key, values);
+      })
+    : columns;
+
+  // The opt out flag is only for the filter, it is not passed on to antd
+  const visibleColumns = filteredColumns.map(({ filterable, ...col }) => col);
+
+  const visibleData = columnFilters && !isControlled ? applyColumnFilters(dataSource, filterColumns, localFilters) : dataSource;
+
   useEffect(() => {}, [state.theme.colors]);
 
   // Header styling
@@ -57,7 +104,7 @@ const TableComponent = ({ columns, dataSource, loading, fixed, scroll, summary,
   }));
 
   // Apply fixed property to the columns you need
-  const updatedColumns = columns.map((col) => ({
+  const updatedColumns = visibleColumns.map((col) => ({
     ...col,
     onHeaderCell: () => ({
       style: headerStyle,
@@ -70,7 +117,7 @@ const TableComponent = ({ columns, dataSource, loading, fixed, scroll, summary,
       title={title ? () => title : undefined}
       scroll={scroll}
       className={freezeHeader ? 'frozen-header-table' : undefined}
-      dataSource={dataSource}
+      dataSource={visibleData}
       loading={loading}
       bordered
       fixed={fixed}
@@ -97,6 +144,14 @@ TableComponent.propTypes = {
   data: PropTypes.array.isRequired,
   loading: PropTypes.bool,
   freezeHeader: PropTypes.bool,
+  /** Excel style filter - true for every column (a column is left out with `filterable: false`), or the keys of the columns to filter */
+  columnFilters: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.string)]),
+  /** Applied filters ({ [columnKey]: values }), pass it to filter the data in the screen */
+  filters: PropTypes.object,
+  /** Called with the column key and the selected values, undefined when the filter is removed */
+  onFilterChange: PropTypes.func,
+  /** Records the filter values are listed from, the dataSource when not given */
+  filterRecords: PropTypes.array,
 };
 
 TableComponent.defaultProps = {

package/core/lib/elements/basic/table/table.test.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import TableComponent from './table';
+import { GlobalContext } from '../../../Store';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (text) => text }),
+}));
+
+// The real store pulls in every module of the library, the table only reads the theme from it
+jest.mock('../../../Store', () => ({ GlobalContext: require('react').createContext({}) }));
+
+// The core Button reads the theme from the global store, a plain button is enough here
+jest.mock('../button/button', () => ({ children, onClick, disabled }) => (
+  <button type="button" onClick={onClick} disabled={disabled}>
+    {children}
+  </button>
+));
+
+// antd Table watches the screen size, jsdom has no matchMedia
+beforeAll(() => {
+  window.matchMedia =
+    window.matchMedia ||
+    (() => ({ matches: false, addListener: () => {}, removeListener: () => {}, addEventListener: () => {}, removeEventListener: () => {} }));
+});
+
+const columns = [
+  { key: 'name', title: 'Name', render: (record) => record.name },
+  { key: 'gender', title: 'Gender', render: (record) => record.gender },
+  { key: 'city', title: 'City', dataIndex: 'city' },
+];
+
+const rows = [
+  { key: 1, name: 'Anu', gender: 'Female', city: 'Kochi' },
+  { key: 2, name: 'Ravi', gender: 'Male', city: 'Calicut' },
+];
+
+function renderTable(props) {
+  return render(
+    <GlobalContext.Provider value={{ state: { theme: { colors: {} } } }}>
+      <TableComponent columns={columns} dataSource={rows} {...props} />
+    </GlobalContext.Provider>
+  );
+}
+
+describe('TableComponent column filters', () => {
+  it('has no filter without columnFilters', () => {
+    const { container } = renderTable();
+
+    expect(container.querySelectorAll('.column-filter-icon')).toHaveLength(0);
+  });
+
+  it('filters every column with columnFilters', () => {
+    const { container } = renderTable({ columnFilters: true });
+
+    expect(container.querySelectorAll('.column-filter-icon')).toHaveLength(3);
+  });
+
+  it('filters only the listed columns', () => {
+    const { container } = renderTable({ columnFilters: ['gender'] });
+
+    expect(container.querySelectorAll('.column-filter-icon')).toHaveLength(1);
+  });
+
+  it('filters its own rows with the applied filters', () => {
+    const { getByText, queryByText } = renderTable({ columnFilters: ['gender'], filters: undefined });
+
+    expect(getByText('Anu')).toBeTruthy();
+    expect(queryByText('Ravi')).toBeTruthy();
+  });
+
+  it('shows the screen filters as active, leaving the rows to the screen', () => {
+    const { container, getByText } = renderTable({ columnFilters: ['gender'], filters: { gender: ['Male'] }, onFilterChange: jest.fn() });
+
+    expect(container.querySelectorAll('.column-filter-icon--active')).toHaveLength(1);
+    // Controlled: the screen filters the dataSource, the table shows what it gets
+    expect(getByText('Anu')).toBeTruthy();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.62-dev.4",
+  "version": "2.6.63-dev.0",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"