> For the complete documentation index, see [llms.txt](https://docs.rowsncolumns.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rowsncolumns.app/configuration/features/basic-filter-or-excel-autofilter.md).

# Basic filter or Excel AutoFilter

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

<figure><img src="/files/Nl5j8Yu4SOBPQIdKnSFU" alt=""><figcaption><p>Auto filter</p></figcaption></figure>

Wiring up autofilter using `useSpreadsheetState`

{% code overflow="wrap" %}

```tsx
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>
);
```

{% endcode %}