Slicers

Add, move, resize, and manage slicers for table filtering

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.

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.

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.