UI 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 Studio component is shown below:
Spreadsheet Components
| Component | Description |
|---|---|
| Studio | Fully functional application that can be easily embedded and/or extended using Material-UI and React. |
| WorkbookElement | Accepts a Workbook and displays an ISheet and other editing artifacts. |
| WorkbookToolbars | A collection of WorkbookToolbars that contain CommandButtons |
| FormulaBar | A wrapper around a SheetCellEditor. |
| NamedInput | An editor for creating and managing NamedReferences. |
| SheetElement | Shows a collection of SheetCellRenders and SheetCellEditors as well as Headers. |
| SheetCellRenderer | A read-only rendering of an ICell. |
| SheetCellEditor | An editor that allows for updating an ICell. |
| WorkbookStrip | Contains a set of WorkbookTabs to allow navigation between Sheets. |
| Statusbar | A collection of StatusbarItems. |
| SheetZoomScale | An editor for adjusting zoom scale. |
Advanced Components
Components that can designed to be used standalone but provide advanced editing capabilities found in spreadsheets.
| Component | Description |
|---|---|
| FindReplace | Find/Replace items in the Workbook. |
| NumberFormat | Number Format Edit and Preview. |
| Hyperlink | Hyperlink editor. |
| Comments | Comments editor. |
| Sort | Advanced and multi-level sorting. |
| ThemeSelect | For previewing or selecting current theme from a list of predefined themes. |
| ShortcutKeys | Display the shortcut keys associated with a CommandGroup. |
| ResizeHeaders | Allows for resizing of row and column headers. |
| TableNew | Simple table creation. |
| TableEditor | Advanced table editing. |
| ColorPanel | Color-chooser that is theme aware. |
| PresetStylesSelector | For Previewing, selecting, and modifying predefined styles. |
Container Types
SheetXL has 3 main container types
| Container | Description |
|---|---|
| Dialog | A modal dialog that blocks the UI until dismissed. |
| TaskPane | A side pane container that can be collapsed and is expected to be 'selection aware'. |
| Window | A floating window container that can be moved and resized. |
Notification Types
| Toast | Alerts that appear temporarily and do not block the UI. | | Busy | A blocking indicator for operators that require the user to wait. | | StackError | An unexpected runtime error with details for debugging. |
Common Dialogs
| Dialog | Description |
|---|---|
| Input | Configurable input dialog, used for 'Goto', 'Rename', confirmation prompts, and other simple inputs. |
| Options | Configurable options dialog for easily presenting a set of options. |
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}>
<Studio />
</ThemeProvider>
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.
Document Themes
Document Themes are used for rendering they managed are associated with the data so they are managed via document themes.