Filtering

{
  accessorKey: 'amount',
  header: 'Amount',
  meta: {
    filterType: 'number',
    enableFilterOperators: true,
    operatorPreset: 'comparison', // equals, notEquals, greaterThan, lessThan
  },
}

{
  accessorKey: 'price',
  header: 'Price',
  meta: {
    filterType: 'number',
    enableFilterOperators: true,
    allowedOperators: ['equals', 'greaterThan', 'lessThan'],
  },
}

{
  accessorKey: 'category',
  header: 'Category',
  meta: {
    filterType: 'select',
    filterOptions: [
      { label: 'Electronics', value: 'electronics' },
      { label: 'Clothing', value: 'clothing' },
      { label: 'Books', value: 'books' },
    ],
  },
}

{
  accessorKey: 'country',
  header: 'Country',
  meta: {
    filterType: 'select',
    filterOptions: [...], // Long list
    filterSearchable: true,
  },
}

{
  accessorKey: 'status',
  header: 'Status',
  meta: {
    filterType: 'select',
    filterOptions: [...],
    filterShowSelectAll: true,
  },
}

<ActiveGrid
  mode="server"
  fetchFn={async (params) => {
    const response = await api.getData(params);
    return {
      data: response.data,
      totalCount: response.total,
      meta: {
        facets: {
          status: [
            { label: 'Active', value: 'active', count: 45 },
            { label: 'Inactive', value: 'inactive', count: 12 },
          ],
        },
      },
    };
  }}
  {...}
/>

{
  accessorKey: 'tags',
  header: 'Tags',
  filterFn: (row, columnId, filterValue) => {
    const tags = row.getValue(columnId) as string[];
    return tags.some(tag => 
      tag.toLowerCase().includes(filterValue.toLowerCase())
    );
  },
  meta: {
    filterType: 'text',
  },
}

<ActiveGrid
  toolbar={{
    search: {
      placeholder: 'Search all columns...',
      debounceMs: 300,
    },
  }}
  {...}
/>

import { useActiveGrid } from '@workspace/active-grid';

function MyComponent() {
  const table = useActiveGrid();
  
  // Set column filter
  const filterByStatus = (status: string) => {
    table.getColumn('status')?.setFilterValue(status);
  };
  
  // Clear column filter
  const clearStatusFilter = () => {
    table.getColumn('status')?.setFilterValue(undefined);
  };
  
  // Set global filter
  const searchAll = (query: string) => {
    table.setGlobalFilter(query);
  };
  
  // Clear all filters
  const clearAllFilters = () => {
    table.resetColumnFilters();
    table.setGlobalFilter('');
  };
}

import { useState } from 'react';
import { ColumnFiltersState } from '@tanstack/react-table';

function MyComponent() {
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([
    { id: 'status', value: 'active' },
  ]);
  
  return (
    <ActiveGrid
      columns={columns}
      data={data}
      state={{ columnFilters }}
      onColumnFiltersChange={setColumnFilters}
      {...}
    />
  );
}

<ActiveGrid
  mode="server"
  fetchFn={async (params) => {
    // params.filters: [{ id: 'status', value: 'active' }]
    // params.globalFilter: 'search query'
    
    const response = await api.getUsers({
      filters: params.filters,
      search: params.globalFilter,
    });
    
    return {
      data: response.data,
      totalCount: response.total,
    };
  }}
  {...}
/>

// Text, number, date filters without operators
{ id: 'name', value: 'John' }

// When operators are enabled
{
  id: 'price',
  value: {
    operator: 'greaterThan',
    value: 100,
  },
}

// Between/inRange operators
{
  id: 'price',
  value: {
    operator: 'between',
    value: 100,
    valueTo: 500,
  },
}

const columns: GridColumnDef<Product>[] = [
  {
    accessorKey: 'name',
    header: 'Product',
    meta: {
      filterType: 'text',
    },
  },
  {
    accessorKey: 'price',
    header: 'Price',
    meta: {
      filterType: 'number',
      enableFilterOperators: true,
      operatorPreset: 'comparison',
    },
  },
  {
    accessorKey: 'category',
    header: 'Category',
    meta: {
      filterType: 'select',
      filterOptions: [
        { label: 'Electronics', value: 'electronics' },
        { label: 'Clothing', value: 'clothing' },
      ],
      filterSearchable: true,
    },
  },
  {
    accessorKey: 'inStock',
    header: 'In Stock',
    meta: {
      filterType: 'boolean',
      booleanFilterLabels: {
        all: 'All Items',
        true: 'In Stock',
        false: 'Out of Stock',
      },
    },
  },
];

{
  accessorKey: 'createdAt',
  header: 'Created',
  meta: {
    filterType: 'date',
    enableFilterOperators: true,
    defaultFilterOperator: 'inRange',
    allowedOperators: ['before', 'after', 'inRange'],
  },
}

{
  accessorKey: 'tags',
  header: 'Tags',
  filterFn: (row, columnId, filterValue: string[]) => {
    if (!filterValue || filterValue.length === 0) return true;
    const rowTags = row.getValue(columnId) as string[];
    return filterValue.some(tag => rowTags.includes(tag));
  },
  meta: {
    filterType: 'select',
    filterOptions: [
      { label: 'Urgent', value: 'urgent' },
      { label: 'Important', value: 'important' },
      { label: 'Feature', value: 'feature' },
    ],
    filterShowSelectAll: true,
  },
}

import { FilterFn } from '@tanstack/react-table';

type Product = {
  name: string;
  tags: string[];
  price: number;
};

const tagsFilter: FilterFn<Product> = (row, columnId, filterValue) => {
  const tags = row.getValue(columnId) as string[];
  const searchTags = filterValue as string[];
  return searchTags.some(tag => tags.includes(tag));
};

const columns: GridColumnDef<Product>[] = [
  {
    accessorKey: 'tags',
    header: 'Tags',
    filterFn: tagsFilter,
    meta: {
      filterType: 'select',
    },
  },
];