Grid API Methods

const columns = table.getAllColumns();

const nameColumn = table.getColumn('name');

// Show all
table.toggleAllColumnsVisible(true);

// Hide all
table.toggleAllColumnsVisible(false);

table.resetColumnVisibility();

table.resetColumnOrder();

table.resetColumnSizing();

table.setColumnFilters([
  { id: 'status', value: 'active' },
  { id: 'role', value: 'admin' },
]);

table.setGlobalFilter('search query');

table.resetColumnFilters();

table.resetGlobalFilter();

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

table.setSorting([
  { id: 'name', desc: false },
  { id: 'createdAt', desc: true },
]);

table.resetSorting();

table.setPageIndex(2); // Go to page 3

table.setPageSize(50);

table.nextPage();

table.previousPage();

table.firstPage();

table.lastPage();

const canGoNext = table.getCanNextPage();

const canGoPrevious = table.getCanPreviousPage();

const totalPages = table.getPageCount();

const { pageIndex, pageSize } = table.getState().pagination;

const handleRefresh = () => {
  table.refetch();
};

const state = table.getState();

console.log(state.sorting);
console.log(state.columnFilters);
console.log(state.pagination);
console.log(state.rowSelection);
console.log(state.columnVisibility);

table.setState((prev) => ({
  ...prev,
  sorting: [{ id: 'name', desc: false }],
}));

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

function TableControls() {
  const table = useActiveGrid();
  
  // Selection
  const handleSelectAll = () => {
    table.toggleAllRowsSelected(true);
  };
  
  const handleClearSelection = () => {
    table.resetRowSelection();
  };
  
  const selectedCount = table.getSelectedRowModel().rows.length;
  
  // Filtering
  const handleClearFilters = () => {
    table.resetColumnFilters();
    table.resetGlobalFilter();
  };
  
  const handleFilterActive = () => {
    table.setColumnFilters([
      { id: 'status', value: 'active' },
    ]);
  };
  
  // Sorting
  const handleSortByName = () => {
    table.setSorting([{ id: 'name', desc: false }]);
  };
  
  const handleClearSort = () => {
    table.resetSorting();
  };
  
  // Pagination
  const handleFirstPage = () => {
    table.firstPage();
  };
  
  const handleLastPage = () => {
    table.lastPage();
  };
  
  const handleChangePageSize = (size: number) => {
    table.setPageSize(size);
  };
  
  // Columns
  const handleShowAllColumns = () => {
    table.toggleAllColumnsVisible(true);
  };
  
  const handleResetColumns = () => {
    table.resetColumnVisibility();
    table.resetColumnOrder();
    table.resetColumnSizing();
  };
  
  // Data access
  const filteredRows = table.getFilteredRowModel().rows;
  const totalRows = table.getRowModel().rows.length;
  
  return (
    <div className="flex flex-wrap gap-2 p-4">
      {/* Selection */}
      <div className="flex gap-2">
        <Button onClick={handleSelectAll}>Select All</Button>
        <Button onClick={handleClearSelection}>Clear Selection</Button>
        {selectedCount > 0 && (
          <Badge>{selectedCount} selected</Badge>
        )}
      </div>
      
      {/* Filtering */}
      <div className="flex gap-2">
        <Button onClick={handleFilterActive}>Show Active</Button>
        <Button onClick={handleClearFilters}>Clear Filters</Button>
      </div>
      
      {/* Sorting */}
      <div className="flex gap-2">
        <Button onClick={handleSortByName}>Sort by Name</Button>
        <Button onClick={handleClearSort}>Clear Sort</Button>
      </div>
      
      {/* Pagination */}
      <div className="flex gap-2">
        <Button onClick={handleFirstPage} disabled={!table.getCanPreviousPage()}>
          First
        </Button>
        <Button onClick={table.previousPage} disabled={!table.getCanPreviousPage()}>
          Previous
        </Button>
        <Button onClick={table.nextPage} disabled={!table.getCanNextPage()}>
          Next
        </Button>
        <Button onClick={handleLastPage} disabled={!table.getCanNextPage()}>
          Last
        </Button>
        
        <Select value={table.getState().pagination.pageSize} onValueChange={handleChangePageSize}>
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="10">10</SelectItem>
            <SelectItem value="25">25</SelectItem>
            <SelectItem value="50">50</SelectItem>
          </SelectContent>
        </Select>
      </div>
      
      {/* Columns */}
      <div className="flex gap-2">
        <Button onClick={handleShowAllColumns}>Show All Columns</Button>
        <Button onClick={handleResetColumns}>Reset Columns</Button>
      </div>
      
      {/* Info */}
      <div className="text-sm text-muted-foreground">
        Showing {filteredRows.length} of {totalRows} rows
      </div>
    </div>
  );
}

<ActiveGrid
  toolbar={{
    actions: (table) => {
      const selectedCount = table.getSelectedRowModel().rows.length;
      
      return (
        <div className="flex gap-2">
          {selectedCount > 0 && (
            <>
              <Button onClick={() => handleBulkAction(table.getSelectedRowModel().rows)}>
                Action ({selectedCount})
              </Button>
              <Button variant="outline" onClick={() => table.resetRowSelection()}>
                Clear Selection
              </Button>
            </>
          )}
          
          <Button onClick={() => table.refetch()}>
            Refresh
          </Button>
          
          <Button onClick={() => {
            table.resetColumnFilters();
            table.resetGlobalFilter();
            table.resetSorting();
          }}>
            Reset All
          </Button>
        </div>
      );
    },
  }}
  {...}
/>

import { Table } from '@tanstack/react-table';
import { useActiveGrid } from '@workspace/active-grid';

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

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

// In toolbar
<ActiveGrid<User>
  toolbar={{
    actions: (table: Table<User>) => (
      <Button onClick={() => table.resetRowSelection()}>
        Clear
      </Button>
    ),
  }}
  {...}
/>