> 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/api/sheets.md).

# Sheets

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>

```typescript
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

```typescript
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 />
)
```