Type Definitions

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

const operator: FilterOperator = 
  | 'contains'
  | 'equals'
  | 'startsWith'
  | 'endsWith'
  | 'greaterThan'
  | 'lessThan'
  | 'between'
  | 'before'
  | 'after'
  | 'inRange';

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

// Simple value
const simpleFilter: FilterValue = 'active';

// With operator
const operatorFilter: FilterValue = {
  operator: 'greaterThan',
  value: 100,
};

// Range
const rangeFilter: FilterValue = {
  operator: 'between',
  value: 10,
  valueTo: 50,
};

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

const facets: FacetOption[] = [
  { label: 'Active', value: 'active', count: 45 },
  { label: 'Inactive', value: 'inactive', count: 12 },
];

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

const menuItem: ContextMenuItem<User> = {
  label: 'Edit',
  action: (user) => handleEdit(user),
  icon: Pencil,
  variant: 'default',
  disabled: false,
};

// Or separator
const separator: ContextMenuItem<User> = 'separator';

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

const buildMenu: ContextMenuBuilder<User> = (user) => [
  {
    label: 'Edit',
    action: () => handleEdit(user),
  },
  'separator',
  {
    label: 'Delete',
    action: () => handleDelete(user),
    variant: 'destructive',
  },
];

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

const fetchUsers: ServerFetchFunction<User> = async (params) => {
  const response = await api.getUsers(params);
  return {
    data: response.users,
    totalCount: response.total,
  };
};

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

const params: ServerFetchParams = {
  pageIndex: 0,
  pageSize: 25,
  sorting: [{ id: 'name', desc: false }],
  filters: [{ id: 'status', value: 'active' }],
  globalFilter: 'search query',
};

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

const response: PagedResponse<User> = {
  data: users,
  totalCount: 1000,
  meta: {
    aggregations: {
      totalRevenue: 50000,
    },
    facets: {
      status: [
        { label: 'Active', value: 'active', count: 45 },
      ],
    },
  },
};

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

const exportOptions: GridExportOptions = {
  enabled: true,
  formats: ['xlsx', 'csv', 'json'],
  filename: 'export',
};

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

const format: GridExportFormat = 'csv' | 'json' | 'xlsx';

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

const config: GridConfig = {
  columnDefaults: {
    size: 150,
    enableSorting: true,
  },
  settings: {
    rowHeight: 48,
    stripedRows: true,
  },
  maxPinnedRows: 10,
};

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

const partialConfig: PartialGridConfig = {
  columnDefaults: {
    size: 150,
  },
};

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

const pinnedRows: PinnedRowsBuffer<User> = {
  top: [
    { id: '1', name: 'Admin', email: 'admin@example.com' },
  ],
  bottom: [
    { id: '999', name: 'Total', email: '' },
  ],
};

import {
  Row,
  Column,
  Table,
  RowSelectionState,
  SortingState,
  ColumnFiltersState,
  PaginationState,
  ColumnVisibilityState,
  ColumnOrderState,
  ColumnPinningState,
  ColumnSizingState,
} from '@tanstack/react-table';

import {
  ActiveGrid,
  GridProps,
  GridColumnDef,
  GridSettings,
  GridToolbarConfig,
  GridPaginationConfig,
  EditingCommitPayload,
  ServerFetchFunction,
  PagedResponse,
  ContextMenuItem,
} from '@workspace/active-grid';
import { RowSelectionState } from '@tanstack/react-table';

type User = {
  id: string;
  name: string;
  email: string;
  status: 'active' | 'inactive';
};

const columns: GridColumnDef<User>[] = [
  {
    accessorKey: 'name',
    header: 'Name',
  },
];

const settings: GridSettings<User> = {
  rowHeight: 48,
  stripedRows: true,
};

const toolbarConfig: GridToolbarConfig = {
  search: { placeholder: 'Search...' },
};

const paginationConfig: GridPaginationConfig = {
  enabled: true,
  pageSizeOptions: [10, 25, 50],
};

const contextMenuItems: ContextMenuItem<User>[] = [
  {
    label: 'Edit',
    action: (user) => console.log(user),
  },
];

const fetchUsers: ServerFetchFunction<User> = async (params) => {
  const response = await api.getUsers(params);
  return {
    data: response.users,
    totalCount: response.total,
  };
};

const handleCommit = async (payload: EditingCommitPayload<User>) => {
  await api.updateUser(payload.rowId, payload.changes);
};

function UsersTable() {
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
  
  const props: GridProps<User> = {
    columns,
    data: [],
    settings,
    toolbar: toolbarConfig,
    pagination: paginationConfig,
    contextMenu: () => contextMenuItems,
    mode: 'server',
    fetchFn: fetchUsers,
    onDataCommit: handleCommit,
    state: { rowSelection },
    onRowSelectionChange: setRowSelection,
  };
  
  return <ActiveGrid {...props} />;
}

// Import specific types
import type {
  GridColumnDef,
  GridSettings,
  EditingCommitPayload,
} from '@workspace/active-grid';

// Or import all types
import type * as ActiveGridTypes from '@workspace/active-grid';