Components
SheetXL's UI is built from a set of composable React Components. These can be used as standalone components or assembled together to support a complete spreadsheet experience.
An overview of the StandaloneWorkbook component is shown below:
Spreadsheet Components
| Component | Description |
|---|---|
| StandaloneWorkbook | Fully functional application that can be easily embedded and/or extended using Material-UI and React. |
| Workbook | Accepts a WorkbookModel and displays an ISheetModel and other editing artifacts. |
| WorkbookToolbars | Collection of WorkbookToolbars that contain CommandButtons |
| FormulaBar | A Wrapper around a SheetCellEditor. |
| RangeEditor | Displays current range and allows for selecting and creating NamedRanges. |
| Sheet | Shows a collection of SheetCellRenders and SheetCellEditors as well as Headers. |
| SheetCellRenderer | A read only rendering of a value an ICellModel. |
| SheetCellEditor | An editor that allows for updating an ICellModel. |
| WorkbookStrip | Contains a set of WorkbookTabs to allow navigation between Sheets. |
| Statusbar | A Collection of StatusbarItems. |
| SheetZoomScale | An editor for selecting a zoom scale. |
Spreadsheet Dialogs
Additionally SheetXL has a number of dialog specific for working with spreadsheets.
| Dialog | Description |
|---|---|
| FindReplaceWindow | Find/Replace items in the Workbook. |
| NumberFormatDialog | Allow for editing of the number format. |
| SortDialog | Advanced and multi-level sorting. |
Advanced Components
| Component | Description |
|---|---|
| AdjustedColorPanel | Color-chooser that is theme aware. |
| PresetStylesSelector | For Previewing, selecting, and modifying predefined styles. |
| ThemeSelectPanel | For previewing and selecting current theme from a list of predefined themes. |
| ShortcutKeysPanel | Display the shortcut keys associated with a CommandMap. |
Common Dialogs
| Dialog | Description |
|---|---|
| OptionsDialog | Configurable options dialog, used for 'Goto', 'Rename', confirmation prompts, and other simple inputs. |
Configuring Components
Like all React components SheetXL components are configured using properties; see API Reference for the specific
properties available for each component. Most components also support the ref property; when they do they always expose the
underlying component and additional imperative API calls as defined in the Typescript interface
following the convention <Component>Attributes.
App Themes
SheetXL has two types of themes.
- App Themes are used to render the application and are configured via CSS or MUIThemeProvider.
- Doc Themes are used for render the spreadsheet and are configured via the models and styles and saved within the document.
App Themes are configured using Material UI's MUIThemeProvider component.
/**
* Wrapping a SheetXL component inside of a MUIThemeProvider.
*/
<ThemeProvider theme={currentTheme}>
<StandaloneWorkbook />
</ThemeProvider>
A working example is available at CodeSandbox/custom-app-theme.
App theme extensions
SheetXL has a thin layer of customized MUI components known as 'Exhibit Components'. These extend MUI components to provide functionality and styling needed for SheetXL. The Exhibit Components are MIT open-sourced and can be found at github.
Doc Themes
While Doc Themes are used for rendering they managed are associated with the data so they are managed via models themes.