DataTableFilter

import { useState } from 'react';

import {
  DataTableFilter,
  createColumnConfigHelper,
  filterData,
  useDataTableFilters,
  type FiltersState
} from '@/components/docyrus-native/data-table-filter';

type Deal = { name: string; stage: string; amount: number; closeDate: Date; won: boolean };

const dtf = createColumnConfigHelper<Deal>();

const columnsConfig = [
  dtf.text().id('name').accessor(row => row.name).displayName('Name').icon('fal text').build(),
  dtf.option().id('stage').accessor(row => row.stage).displayName('Stage')
    .options([
      { label: 'Lead', value: 'lead', color: '#94a3b8' },
      { label: 'Won', value: 'won', color: '#22c55e' }
    ])
    .build(),
  dtf.number().id('amount').accessor(row => row.amount).displayName('Amount').build(),
  dtf.date().id('closeDate').accessor(row => row.closeDate).displayName('Close date').build()
];

export function DealsFilter({ deals }: { deals: Deal[] }) {
  const [filters, setFilters] = useState<FiltersState>([]);
  const { columns, actions, strategy } = useDataTableFilters({
    strategy: 'client',
    data: deals,
    columnsConfig,
    filters,
    onFiltersChange: setFilters
  });

  const visibleDeals = filterData(deals, columnsConfig, filters); // render these rows

  return (
    <>
      <DataTableFilter columns={columns} filters={filters} actions={actions} strategy={strategy} />
      <DealList deals={visibleDeals} />
    </>
  );
}

import { filtersToServerFilter } from '@/components/docyrus-native/data-table-filter';

const { columns, filters, actions } = useDataTableFilters({
  strategy: 'server',
  data: [],
  columnsConfig,
  calculateFacets: false,
  options: { stage: stageOptions },           // server strategy needs static options…
  faceted: { stage: stageCounts }              // …and (optionally) counts from the server
});

// Backend-safe payload: `like %x%`, `between`, `not between` → OR group, `contains any` for array columns,
// snake_case relative dates (`last_7_days`, `in_last_x_days` + N). Unsendable rules are dropped.
const params = { filters: filtersToServerFilter(filters, { columns: columnsConfig }) };

const ownerColumn = {
  ...dtf.option().id('owner').accessor(row => row.ownerId).displayName('Owner').build(),
  asyncOptions: {
    pageSize: 25,
    debounceMs: 300,
    load: async ({ search, page, pageSize, signal }) => {
      const res = await client.get('/v1/users', { params: { search, offset: page * pageSize, limit: pageSize }, signal });
      return { items: res.data.map(u => ({ value: u.id, label: `${u.firstname} ${u.lastname}`, imageUrl: u.photo })), hasMore: res.data.length === pageSize };
    }
  }
};