Sheets

Supports multiple sheets with cross-references and tables

Developers can define any Sheet type, as CanvasGrid is agnostic of sheets. The sheet model used by useSpreadsheetState hook is

https://github.com/rowsncolumns/spreadsheet/blob/main/apps/spreadsheet/types.ts#L6

export type Sheet = {
  title: string;
  sheetId: number;
  tabColor?: string;
  hidden?: boolean;
  rowCount?: number;
  columnCount?: number;
  frozenRowCount?: number;
  frozenColumnCount?: number;
  hideGridlines?: boolean;
  merges?: GridRange[];
  basicFilter?: FilterView;
  rowMetadata?: (DimensionProperties | null)[];
  columnMetadata?: (DimensionProperties | null)[];
};

Sheet components

The following Sheet components are packaged with Spreadsheet

• NewSheetButton

• SheetSwitcher

• SheetTabs

• SheetStatus

• TableEditor

• DeleteSheetConfirmation

Using your own Sheet type

You can extend from the core Sheet type and add your custom attributes

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

type MyCustomSheet = Sheet & {
  owner: string;
  module: string
}

const Spreadsheet = () => {
  const [ sheets, onChangeSheets ] = useState<MyCustomSheet[]>([])
  const { } = useSpreadsheetState({
    sheets,
    onChangeSheets
  })
  return (
    <CanvasGrid
      rowCount={1000}
      columnCount={1000}
      sheetId={1}
    />
  );
};

export const App = () => (
  <SpreadsheetProvider>
    <Spreadsheet />
  <SpreadsheetProvider />
)