# Slicers

Slicers let users filter table data using an interactive floating control on the sheet.

## Basic setup

Use `slicers` state + `onChangeSlicers` with `useSpreadsheetState`, then pass slicer props and handlers to `CanvasGrid`.

```tsx
import { useState } from "react";
import {
  CanvasGrid,
  Slicer,
  SlicerComponent,
  SlicerComponentProps,
} from "@rowsncolumns/spreadsheet";
import { useSpreadsheetState } from "@rowsncolumns/spreadsheet-state";

const Example = () => {
  const [slicers, onChangeSlicers] = useState<Slicer[]>([
    {
      slicerId: "slicer-1",
      position: {
        sheetId: 1,
        overlayPosition: {
          anchorCell: { rowIndex: 2, columnIndex: 12 },
          widthPixels: 150,
          heightPixels: 200,
          offsetXPixels: 10,
          offsetYPixels: 10,
        },
      },
      spec: {
        type: "table",
        tableIds: [1],
        columnIndex: 1,
      },
    },
  ]);

  const {
    onMoveSlicer,
    onResizeSlicer,
    onDeleteSlicer,
    onUpdateSlicer,
    onCreateSlicer,
    onRequestEditSlicer,
  } = useSpreadsheetState({
    slicers,
    onChangeSlicers,
  });

  return (
    <CanvasGrid
      slicers={slicers}
      onMoveSlicer={onMoveSlicer}
      onResizeSlicer={onResizeSlicer}
      onDeleteSlicer={onDeleteSlicer}
      onRequestEditSlicer={onRequestEditSlicer}
      getSlicerComponent={(props: SlicerComponentProps) => {
        return <SlicerComponent {...props} />;
      }}
    />
  );
};
```

## Programmatically create a slicer

You can create slicers using `onCreateSlicer`.

```tsx
onCreateSlicer({
  slicerId: "slicer-2",
  position: {
    sheetId: 1,
    overlayPosition: {
      anchorCell: { rowIndex: 5, columnIndex: 12 },
      widthPixels: 160,
      heightPixels: 220,
      offsetXPixels: 0,
      offsetYPixels: 0,
    },
  },
  spec: {
    type: "table",
    tableIds: [1],
    columnIndex: 2,
  },
});
```

## Available slicer handlers from `useSpreadsheetState`

* `onCreateSlicer`
* `onUpdateSlicer`
* `onDeleteSlicer`
* `onMoveSlicer`
* `onResizeSlicer`
* `onRequestEditSlicer`

All handlers integrate with undo/redo history when `onChangeSlicers` is provided.

## Notes

* Slicers are currently table-based (`spec.type = "table"`).
* For custom rendering, provide your own component through `getSlicerComponent`.