Rows n’ Columns Docs
Visit HomepagePricing
  • Introduction
  • License
  • Demos
  • Getting started
    • Installation
    • Spreadsheet state
    • Headless UI
    • Imperative Spreadsheet API
    • Examples
  • ⚙️Configuration
    • Features
      • Data validation
      • Formula evaluation
      • Real-time data
      • Cell editors
      • Cell renderer
      • Structured Cell Renderer
      • Theming
      • Styling
      • Context menu
      • Localisation
      • Undo/Redo
      • Conditional formatting
      • Named ranges
      • Structured references
        • Schema based tables and columns
        • Calculated columns
      • Basic filter or Excel AutoFilter
      • Charts
      • Embedded content
      • Calculate on-demand
      • Drag and Drop
      • Pivoting and Grouping (Coming soon)
      • Tokenizer
      • Lazy loading/Infinite scrolling
      • OpenAI/Chat GPT Integration
      • Search
      • Formula protection
      • Autofill
      • Export canvas as image
    • Components
      • Canvas Grid
      • Toolbar
      • Sheet Tabs
      • Sheet Switcher
      • Sheet Status
      • Range Selector
      • Formula Input
      • Selection Input
      • SheetSearch
      • NamedRangeEditor
      • DeleteSheetConfirmation
      • TableEditor
      • Cell Format Editor
      • Conditional Format Editor
      • Data Validation Editor
      • Insert Link Editor
      • Insert Image Editor
      • Floating Cell Editor
    • API
      • Cell Data
      • Sheets
      • SpreadsheetProvider
      • useSpreadsheet
      • Modules
      • SheetCell
    • Using Spreadsheet with NextJS
    • Keyboard shortcuts
  • Collaboration
    • Real time collaboration
    • Yjs Collaboration
    • Supabase realtime Collaboration
  • Charts
    • Charts
    • Custom charts
  • Excel and Google sheets
    • CSV
    • Excel
    • Google sheets (Coming soon)
  • Functions
    • Named functions
    • Array formulas
  • Data persistence
    • Server side data persistence
    • React Query integration
  • Specifications
    • Browser support
    • Third party licenses
  • Support
    • Contact support
    • Report bugs
    • Feature requests
Powered by GitBook
On this page

Was this helpful?

  1. Configuration
  2. Components

Toolbar

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

PreviousCanvas GridNextSheet Tabs

Last updated 1 year ago

Was this helpful?

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.

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

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

⚙️
Radix icons
Toolbar