feat: expose Datatable filters

apps/www/src/app/examples/table/page.tsx

@@ -0,0 +1,179 @@
+'use client';
+import {
+  Button,
+  DataTable,
+  DataTableColumnDef,
+  DataTableQuery,
+  Flex,
+  IconButton
+} from '@raystack/apsara';
+import { FilterIcon } from '@raystack/apsara/icons';
+import { useMemo, useState } from 'react';
+
+const data: Payment[] = [
+  {
+    id: 'm5gr84i9',
+    amount: 316,
+    status: 'success',
+    email: 'ken99@yahoo.com'
+  },
+  {
+    id: '3u1reuv4',
+    amount: 242,
+    status: 'success',
+    email: 'Abe45@gmail.com'
+  },
+  {
+    id: 'derv1ws0',
+    amount: 837,
+    status: 'processing',
+    email: 'Monserrat44@gmail.com'
+  },
+  {
+    id: '5kma53ae',
+    amount: 874,
+    status: 'success',
+    email: 'Silas22@gmail.com'
+  },
+  {
+    id: 'bhqecj4p',
+    amount: 721,
+    status: 'failed',
+    email: 'carmella@hotmail.com'
+  }
+];
+
+export type Payment = {
+  id: string;
+  amount: number;
+  status: 'pending' | 'processing' | 'success' | 'failed';
+  email: string;
+};
+
+export const columns: DataTableColumnDef<Payment, unknown>[] = [
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => (
+      <div className='capitalize'>{row.getValue('status')}</div>
+    ),
+    filterOptions: [
+      {
+        label: 'Pending',
+        value: 'pending'
+      },
+      {
+        label: 'Processing',
+        value: 'processing'
+      },
+      {
+        label: 'Success',
+        value: 'success'
+      },
+      {
+        label: 'Failed',
+        value: 'failed'
+      }
+    ],
+    filterType: 'multiselect',
+    enableColumnFilter: true
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    cell: ({ row }) => <div className='lowercase'>{row.getValue('email')}</div>,
+    enableColumnFilter: true
+  },
+  {
+    accessorKey: 'amount',
+    header: 'Amount',
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue('amount'));
+      // Format the amount as a dollar amount
+      const formatted = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD'
+      }).format(amount);
+
+      return <div className='text-right font-medium'>{formatted}</div>;
+    },
+    enableColumnFilter: true,
+    filterType: 'number'
+  }
+];
+
+const Page = () => {
+  const [tableQuery, setTableQuery] = useState<DataTableQuery>();
+  console.log('tableQuery>> ', tableQuery);
+
+  const filteredData = useMemo(() => {
+    const filters = tableQuery?.filters?.map(filter => filter.name) || [];
+    return data.filter(item => {
+      let shouldShow = true;
+      if (filters.includes('email')) {
+        shouldShow = item.email.includes(
+          tableQuery?.filters?.[filters.indexOf('email')]?.value || ''
+        );
+      }
+      if (shouldShow && filters.includes('amount')) {
+        shouldShow =
+          item.amount ===
+          tableQuery?.filters?.[filters.indexOf('amount')]?.value;
+      }
+      if (shouldShow && filters.includes('status')) {
+        shouldShow = tableQuery?.filters?.[
+          filters.indexOf('status')
+        ]?.value.includes(item.status);
+      }
+      return shouldShow;
+    });
+  }, [tableQuery]);
+
+  return (
+    <Flex
+      style={{
+        height: '100vh',
+        width: '100%',
+        backgroundColor: 'var(--rs-color-background-base-primary)',
+        padding: '32px'
+      }}
+    >
+      <Flex direction='column' gap={4}>
+        <DataTable
+          data={filteredData}
+          mode='server'
+          columns={columns}
+          query={tableQuery}
+          onTableQueryChange={setTableQuery}
+          defaultSort={{ name: 'email', order: 'asc' }}
+        >
+          <DataTable.Filters
+            trigger={({ appliedFilters }) =>
+              appliedFilters.size > 0 ? (
+                <IconButton size={4}>
+                  <FilterIcon />
+                </IconButton>
+              ) : (
+                <Button
+                  variant='outline'
+                  size='small'
+                  leadingIcon={<FilterIcon />}
+                  color='neutral'
+                >
+                  Filter
+                </Button>
+              )
+            }
+          />
+          {filteredData.map(item => (
+            <div
+              key={item.id}
+            >{`${item.email} - ${item.amount} - ${item.status}`}</div>
+          ))}
+        </DataTable>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Page;

apps/www/src/content/docs/components/datatable/index.mdx

@@ -189,3 +189,18 @@ const columns = [
   },
 ];
 ```
+
+### Using DataTable Filter
+
+The `DataTable.Filters` component can be used separately to filter data for custom views.
+
+```tsx
+<DataTable
+data={data}
+query={query}
+columns={columns}
+mode="server"
+onTableQueryChange={handleQueryChange}>
+    <DataTable.Filters />
+</DataTable>
+```

packages/raystack/components/data-table/components/filters.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { ReactNode, useMemo } from 'react';
 import { FilterIcon } from '~/icons';
 import { FilterOperatorTypes, FilterType } from '~/types/filters';
 import { Button } from '../../button';
@@ -11,39 +12,59 @@ import { DataTableColumn } from '../data-table.types';
 import { useDataTable } from '../hooks/useDataTable';
 import { useFilters } from '../hooks/useFilters';
 
+type Trigger<TData, TValue> =
+  | ReactNode
+  | (({
+      availableFilters,
+      appliedFilters
+    }: {
+      availableFilters: DataTableColumn<TData, TValue>[];
+      appliedFilters: Set<string>;
+    }) => ReactNode);
+
 interface AddFilterProps<TData, TValue> {
   columnList: DataTableColumn<TData, TValue>[];
   appliedFiltersSet: Set<string>;
   onAddFilter: (column: DataTableColumn<TData, TValue>) => void;
+  children?: Trigger<TData, TValue>;
 }
 
 function AddFilter<TData, TValue>({
   columnList = [],
   appliedFiltersSet,
-  onAddFilter
+  onAddFilter,
+  children
 }: AddFilterProps<TData, TValue>) {
   const availableFilters = columnList?.filter(
     col => !appliedFiltersSet.has(col.id)
   );
 
+  const trigger = useMemo(() => {
+    if (typeof children === 'function')
+      return children({ availableFilters, appliedFilters: appliedFiltersSet });
+    else if (children) return children;
+    else if (appliedFiltersSet.size > 0)
+      return (
+        <IconButton size={4}>
+          <FilterIcon />
+        </IconButton>
+      );
+    else
+      return (
+        <Button
+          variant='text'
+          size='small'
+          leadingIcon={<FilterIcon />}
+          color='neutral'
+        >
+          Filter
+        </Button>
+      );
+  }, [children, appliedFiltersSet, availableFilters]);
+
   return availableFilters.length > 0 ? (
     <DropdownMenu>
-      <DropdownMenu.Trigger asChild>
-        {appliedFiltersSet.size > 0 ? (
-          <IconButton size={4}>
-            <FilterIcon />
-          </IconButton>
-        ) : (
-          <Button
-            variant='text'
-            size='small'
-            leadingIcon={<FilterIcon />}
-            color='neutral'
-          >
-            Filter
-          </Button>
-        )}
-      </DropdownMenu.Trigger>
+      <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>
       <DropdownMenu.Content>
         {availableFilters?.map(column => {
           const columnDef = column.columnDef;
@@ -59,7 +80,19 @@ function AddFilter<TData, TValue>({
   ) : null;
 }
 
-export function Filters<TData, TValue>() {
+export function Filters<TData, TValue>({
+  classNames,
+  className,
+  trigger
+}: {
+  classNames?: {
+    container?: string;
+    filterChips?: string;
+    addFilter?: string;
+  };
+  className?: string;
+  trigger?: Trigger<TData, TValue>;
+}) {
   const { table, tableQuery } = useDataTable();
   const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];
 
@@ -94,8 +127,8 @@ export function Filters<TData, TValue>() {
     }) || [];
 
   return (
-    <Flex gap={3}>
-      <Flex gap={3}>
+    <Flex gap={3} className={className}>
+      <Flex gap={3} className={classNames?.container}>
         {appliedFilters.map(filter => (
           <FilterChip
             key={filter.name}
@@ -111,14 +144,17 @@ export function Filters<TData, TValue>() {
             }
             columnType={filter.filterType}
             options={filter.options}
+            className={classNames?.filterChips}
           />
         ))}
       </Flex>
       <AddFilter
         columnList={columnList}
         appliedFiltersSet={appliedFiltersSet}
         onAddFilter={onAddFilter}
-      />
+      >
+        {trigger}
+      </AddFilter>
     </Flex>
   );
 }

packages/raystack/components/data-table/data-table.tsx

@@ -10,6 +10,7 @@ import {
 } from '@tanstack/react-table';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Content } from './components/content';
+import { Filters } from './components/filters';
 import { TableSearch } from './components/search';
 import { Toolbar } from './components/toolbar';
 import { TableContext } from './context';
@@ -171,5 +172,6 @@ function DataTableRoot<TData, TValue>({
 export const DataTable = Object.assign(DataTableRoot, {
   Content: Content,
   Toolbar: Toolbar,
-  Search: TableSearch
+  Search: TableSearch,
+  Filters: Filters
 });