Comment on page
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 component is a container for the footer of the Spreadsheet, which houses Sheet Tabs, Sheet Switcher, Sheet Status and NewSheetButton component
Last modified 5mo ago