TypeScript Overview

type User = {
  id: string;
  name: string;
  email: string;
};

const columns: GridColumnDef<User>[] = [
  { accessorKey: 'name', header: 'Name' }, // ✓ Type-safe
  { accessorKey: 'foo', header: 'Foo' },   // ✗ Error: 'foo' not in User
];

<ActiveGrid<User>
  columns={columns}
  data={users}
  {...}
/>

type Product = {
  id: string;
  name: string;
  price: number;
  inStock: boolean;
};

<ActiveGrid<Product>
  columns={columns}
  data={products}
  onRowClick={(row) => {
    // row is typed as Product
    console.log(row.name);
  }}
/>

type User = {
  id: string;
  name: string;
  email: string;
  age: number;
};

const columns: GridColumnDef<User>[] = [
  {
    accessorKey: 'name', // ✓ Type-safe: 'name' is in User
    header: 'Name',
  },
  {
    accessorKey: 'email', // ✓ Type-safe
    header: 'Email',
  },
  {
    accessorKey: 'invalid', // ✗ Error: 'invalid' not in User
    header: 'Invalid',
  },
];

{
  accessorFn: (row: User) => `${row.name} (${row.age})`,
  id: 'nameWithAge',
  header: 'Name & Age',
}

{
  accessorKey: 'age',
  header: 'Age',
  cell: ({ getValue }) => {
    const age = getValue() as number; // Typed as number
    return <span>{age} years old</span>;
  },
}

<ActiveGrid<User>
  onRowClick={(row: User) => {
    console.log(row.id);    // ✓ Type-safe
    console.log(row.name);  // ✓ Type-safe
    console.log(row.foo);   // ✗ Error: 'foo' not in User
  }}
  {...}
/>

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

<ActiveGrid<User>
  onDataCommit={async (payload: EditingCommitPayload<User>) => {
    // payload.newData is User
    // payload.changes is Partial<User>
    await api.updateUser(payload.rowId, payload.changes);
  }}
  {...}
/>

<ActiveGrid<User>
  onCellActivate={(row: User, columnId: string) => {
    console.log(row.name, columnId);
  }}
  {...}
/>

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

const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

<ActiveGrid<User>
  state={{ rowSelection }}
  onRowSelectionChange={setRowSelection}
  {...}
/>

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

const [sorting, setSorting] = useState<SortingState>([
  { id: 'name', desc: false },
]);

<ActiveGrid<User>
  state={{ sorting }}
  onSortingChange={setSorting}
  {...}
/>

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

const [filters, setFilters] = useState<ColumnFiltersState>([
  { id: 'status', value: 'active' },
]);

<ActiveGrid<User>
  state={{ columnFilters: filters }}
  onColumnFiltersChange={setFilters}
  {...}
/>

{
  id: 'actions',
  header: 'Actions',
  cell: ({ row }) => {
    const user = row.original; // Typed as User
    return (
      <Button onClick={() => handleEdit(user.id)}>
        Edit {user.name}
      </Button>
    );
  },
}

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

function TableActions() {
  const table = useActiveGrid<User>();
  
  const selectedRows = table.getSelectedRowModel().rows;
  const selectedData: User[] = selectedRows.map(row => row.original);
  
  return <div>{selectedData.length} selected</div>;
}

declare module '@tanstack/react-table' {
  interface ColumnMeta<TData, TValue> {
    customProp?: string;
    specialFormat?: (value: TValue) => string;
  }
}

// Now you can use custom props
const columns: GridColumnDef<User>[] = [
  {
    accessorKey: 'name',
    header: 'Name',
    meta: {
      customProp: 'value',
      specialFormat: (name) => name.toUpperCase(),
    },
  },
];

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

const columns: GridColumnDef<User>[] = [
  getSelectionColumn<User>(),
  ...dataColumns,
];

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

const columns: GridColumnDef<User>[] = [
  getRowNumberColumn<User>({
    header: '#',
    size: 50,
  }),
  ...dataColumns,
];

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

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

<ActiveGrid<User>
  mode="server"
  fetchFn={fetchUsers}
  {...}
/>