Toolbar

Toolbar component is a wrapper for all formatting buttons of the Spreadsheet

Toolbar component can be imported from spreadsheet module using the following code. You can compose your own toolbar or even use a third-party component to render the buttons.

Radix icons are used for the toolbar buttons, but this can be easily swapped to any icon set by using custom components.

Toolbar

import {
  Toolbar,
  ButtonDecreaseDecimal,
  ButtonFormatCurrency,
  ButtonFormatPercent,
  ButtonIncreaseDecimal,
  ButtonRedo,
  ButtonUndo,
  ScaleSelector,
  ToolbarSeparator,
  BackgroundColorSelector,
  BorderSelector,
  ButtonBold,
  ButtonItalic,
  ButtonStrikethrough,
  ButtonUnderline,
  ButtonInsertImage,
  ButtonInsertLink,
  ButtonSwitchColorMode,
  ThemeSelector,
  TableActions,
  FontFamilySelector,
  FontSizeSelector,
  MergeCellsSelector,
  TextColorSelector,
  TextFormatSelector,
  TextHorizontalAlignSelector,
  TextVerticalAlignSelector,
  TextWrapSelector
} from "@rowsncolumns/spreadsheet";
import { Separator } from "@rowsncolumns/ui";

const App = () => {
  return (
    <Toolbar>
      <ButtonUndo />
      <ButtonRedo />
      <ToolbarSeparator />
      <ScaleSelector />
      <ToolbarSeparator />
      <ButtonFormatCurrency />
      <ButtonFormatPercent />
      <ButtonDecreaseDecimal />
      <ButtonIncreaseDecimal />
      <TextFormatSelector />
      <ToolbarSeparator />
      <FontFamilySelector />
      <ToolbarSeparator />
      <FontSizeSelector />
      <ToolbarSeparator />
      <ButtonBold />
      <ButtonItalic />
      <ButtonUnderline />
      <ButtonStrikethrough />
      <TextColorSelector />
      <ToolbarSeparator />
      <BackgroundColorSelector />
      <BorderSelector />
      <MergeCellsSelector />
      <ToolbarSeparator />
      <TextHorizontalAlignSelector />
      <TextVerticalAlignSelector />
      <TextWrapSelector />
      
      <ButtonInsertImage />
      <ButtonInsertLink />
      <ButtonSwitchColorMode />
      <ThemeSelector />
      <TableAction />
    </Toolbar>
  );
};

BottomBar

BottomBar component is a container for the footer of the Spreadsheet, which houses Sheet Tabs, Sheet Switcher, Sheet Status and NewSheetButton component