Basic filter or Excel AutoFilter

Use a Basic filter or Autofilter to quickly find, filter and sort tabular data

To create a filter from your data,

1. Select a selection or focus on a cell which has some data around it

2. Press Ctrl/Cmd + Shift + F

3. Or Right click on the cell and select Create a filter

This will convert a selection to a filter

Auto filter

Wiring up autofilter using useSpreadsheetState

import {
  SpreadsheetProvider,
  CanvasGrid,
  Sheet
} from "@rowsncolumns/spreadsheet";
import { useState } from "react";
import { useSpreadsheetState } from "@rowsncolumns/spreadsheet-state";

const MySpreadsheet = () => {
  const [ sheets, onChangeSheets ] = useState<Sheet[]>([])
  const { basicFilter, onCreateBasicFilter } = useSpreadsheetState({
    sheets,
  });
  return (
    <CanvasGrid
      basicFilter={basicFilter}
      onCreateBasicFilter={onCreateBasicFilter}
    />
  );
};

const App = () => (
  <SpreadsheetProvider>
    <MySpreadsheet />
  </SpreadsheetProvider>
);