feat: export datatable controls (#553)

* feat: export datatable controls

* feat: improve datatable.displaycontrols

Author: rohanchkrabrty

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

@@ -1,13 +1,10 @@
 'use client';
 import {
-  Button,
   DataTable,
   DataTableColumnDef,
   DataTableQuery,
-  Flex,
-  IconButton
+  Flex
 } from '@raystack/apsara';
-import { FilterIcon } from '@raystack/apsara/icons';
 import { useMemo, useState } from 'react';
 
 const data: Payment[] = [
@@ -76,13 +73,16 @@ export const columns: DataTableColumnDef<Payment, unknown>[] = [
       }
     ],
     filterType: 'multiselect',
-    enableColumnFilter: true
+    enableColumnFilter: true,
+    enableHiding: true
   },
   {
     accessorKey: 'email',
     header: 'Email',
     cell: ({ row }) => <div className='lowercase'>{row.getValue('email')}</div>,
-    enableColumnFilter: true
+    enableColumnFilter: true,
+    enableGrouping: true,
+    enableSorting: true
   },
   {
     accessorKey: 'amount',
@@ -98,7 +98,8 @@ export const columns: DataTableColumnDef<Payment, unknown>[] = [
       return <div className='text-right font-medium'>{formatted}</div>;
     },
     enableColumnFilter: true,
-    filterType: 'number'
+    filterType: 'number',
+    enableSorting: true
   }
 ];
 
@@ -137,8 +138,10 @@ const Page = () => {
         backgroundColor: 'var(--rs-color-background-base-primary)',
         padding: '32px'
       }}
+      direction='column'
+      gap={8}
     >
-      <Flex direction='column' gap={4}>
+      {/* <Flex direction='column' gap={4}>
         <DataTable
           data={filteredData}
           mode='server'
@@ -171,6 +174,21 @@ const Page = () => {
             >{`${item.email} - ${item.amount} - ${item.status}`}</div>
           ))}
         </DataTable>
+      </Flex> */}
+      <Flex direction='row' gap={4}>
+        <DataTable
+          data={filteredData}
+          mode='server'
+          columns={columns}
+          query={tableQuery}
+          onColumnVisibilityChange={value =>
+            console.log('column visibility change>> ', value)
+          }
+          onTableQueryChange={setTableQuery}
+          defaultSort={{ name: 'email', order: 'asc' }}
+        >
+          <DataTable.DisplayControls />
+        </DataTable>
       </Flex>
     </Flex>
   );

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

@@ -24,6 +24,14 @@ import {
 
 <auto-type-table path="./props.ts" name="DataTableProps" />
 
+### DataTable.DisplayControls Props
+
+<auto-type-table path="./props.ts" name="DisplayControlsProps" />
+
+### DataTable.Filters Props
+
+<auto-type-table path="./props.ts" name="FiltersProps" />
+
 ## DataTableQuery Interface
 
 <auto-type-table path="./props.ts" name="DataTableQuery" />
@@ -209,6 +217,21 @@ onTableQueryChange={handleQueryChange}>
 </DataTable>
 ```
 
+### Using DataTable Display Controls
+
+The `DataTable.DisplayControls` component can be used separately to display the display controls for custom views.
+
+```tsx
+<DataTable
+data={data}
+query={query}
+columns={columns}
+mode="server"
+onTableQueryChange={handleQueryChange}
+onColumnVisibilityChange={handleColumnVisibilityChange}>
+  <DataTable.DisplayControls />
+</DataTable>
+```
 ### Using DataTable Search
 
 The `DataTable.Search` component provides search functionality that automatically integrates with the table query. By default, it is disabled in zero state (when no data and no filters/search applied).

apps/www/src/content/docs/components/datatable/props.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 export interface DataTableProps {
   /** Column definitions (Required) */
   columns: DataTableColumnDef[];
@@ -28,6 +30,11 @@ export interface DataTableProps {
 
   /** Infinite scroll callback */
   onLoadMore?: () => Promise<void>;
+
+  /** Column visibility change callback */
+  onColumnVisibilityChange?: (
+    columnVisibility: Record<string, boolean>
+  ) => void;
 }
 
 export interface DataTableQuery {
@@ -73,6 +80,22 @@ export interface DataTableColumnDef<TData, TValue> {
   defaultHidden?: boolean;
 }
 
+export interface DisplayControlsProps {
+  /** Trigger element */
+  trigger?: ReactNode;
+}
+
+export interface FiltersProps {
+  /** Trigger element */
+  trigger?:
+    | ReactNode
+    | (({
+        availableFilters,
+        appliedFilters
+      }: {
+        availableFilters: DataTableColumn<TData, TValue>[];
+        appliedFilters: Set<string>;
+      }) => ReactNode);
 export interface DataTableContentProps {
   /**
    * Custom empty state shown when initial data exists but no results match after filters/search.

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

@@ -2,6 +2,7 @@
 
 import { MixerHorizontalIcon } from '@radix-ui/react-icons';
 
+import { ReactNode } from 'react';
 import { Button } from '../../button';
 import { Flex } from '../../flex';
 import { Popover } from '../../popover';
@@ -16,7 +17,22 @@ import { DisplayProperties } from './display-properties';
 import { Grouping } from './grouping';
 import { Ordering } from './ordering';
 
-export function DisplaySettings<TData, TValue>() {
+interface DisplaySettingsProps {
+  trigger?: ReactNode;
+}
+
+export function DisplaySettings<TData, TValue>({
+  trigger = (
+    <Button
+      variant='outline'
+      color='neutral'
+      size='small'
+      leadingIcon={<MixerHorizontalIcon />}
+    >
+      Display
+    </Button>
+  )
+}: DisplaySettingsProps) {
   const {
     table,
     updateTableQuery,
@@ -69,16 +85,7 @@ export function DisplaySettings<TData, TValue>() {
 
   return (
     <Popover>
-      <Popover.Trigger asChild>
-        <Button
-          variant='outline'
-          color='neutral'
-          size='small'
-          leadingIcon={<MixerHorizontalIcon />}
-        >
-          Display
-        </Button>
-      </Popover.Trigger>
+      <Popover.Trigger asChild>{trigger}</Popover.Trigger>
       <Popover.Content
         className={styles['display-popover-content']}
         align='end'

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

@@ -1,6 +1,7 @@
 'use client';
 
 import {
+  Updater,
   VisibilityState,
   getCoreRowModel,
   getExpandedRowModel,
@@ -10,6 +11,7 @@ import {
 } from '@tanstack/react-table';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Content } from './components/content';
+import { DisplaySettings } from './components/display-settings';
 import { Filters } from './components/filters';
 import { TableSearch } from './components/search';
 import { Toolbar } from './components/toolbar';
@@ -43,14 +45,26 @@ function DataTableRoot<TData, TValue>({
   children,
   onTableQueryChange,
   onLoadMore,
-  onRowClick
+  onRowClick,
+  onColumnVisibilityChange
 }: React.PropsWithChildren<DataTableProps<TData, TValue>>) {
   const defaultTableQuery = getDefaultTableQuery(defaultSort, query);
   const initialColumnVisibility = getInitialColumnVisibility(columns);
 
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
     initialColumnVisibility
   );
+  const handleColumnVisibilityChange = useCallback(
+    (value: Updater<VisibilityState>) => {
+      setColumnVisibility(prev => {
+        const newValue = typeof value === 'function' ? value(prev) : value;
+        onColumnVisibilityChange?.(newValue);
+        return newValue;
+      });
+    },
+    [onColumnVisibilityChange]
+  );
+
   const [tableQuery, setTableQuery] =
     useState<InternalQuery>(defaultTableQuery);
 
@@ -63,8 +77,12 @@ function DataTableRoot<TData, TValue>({
 
   const onDisplaySettingsReset = useCallback(() => {
     setTableQuery(prev => ({ ...prev, ...defaultTableQuery }));
-    setColumnVisibility(initialColumnVisibility);
-  }, [defaultTableQuery, initialColumnVisibility]);
+    handleColumnVisibilityChange(initialColumnVisibility);
+  }, [
+    defaultTableQuery,
+    initialColumnVisibility,
+    handleColumnVisibilityChange
+  ]);
 
   const group_by = tableQuery.group_by?.[0];
 
@@ -100,7 +118,7 @@ function DataTableRoot<TData, TValue>({
     getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),
     manualSorting: mode === 'server',
     manualFiltering: mode === 'server',
-    onColumnVisibilityChange: setColumnVisibility,
+    onColumnVisibilityChange: handleColumnVisibilityChange,
     globalFilterFn: mode === 'server' ? undefined : 'auto',
     initialState: {
       columnVisibility: initialColumnVisibility
@@ -193,5 +211,6 @@ export const DataTable = Object.assign(DataTableRoot, {
   Content: Content,
   Toolbar: Toolbar,
   Search: TableSearch,
-  Filters: Filters
+  Filters: Filters,
+  DisplayControls: DisplaySettings
 });

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

@@ -1,4 +1,9 @@
-import type { Column, ColumnDef, Table } from '@tanstack/table-core';
+import type {
+  Column,
+  ColumnDef,
+  Table,
+  VisibilityState
+} from '@tanstack/table-core';
 import type {
   DataTableFilterOperatorTypes,
   FilterOperatorTypes,
@@ -103,6 +108,7 @@ export interface DataTableProps<TData, TValue> {
   defaultSort: DataTableSort;
   onLoadMore?: () => Promise<void>;
   onRowClick?: (row: TData) => void;
+  onColumnVisibilityChange?: (columnVisibility: VisibilityState) => void;
 }
 
 export type DataTableContentProps = {