streaksheet

StreakSheet

(Under development)

Usage

Important: StreakSheet requires the browser to support AbortController, so if you need to support browsers that predate it (https://caniuse.com/#feat=abortcontroller), you must first load a global polyfill.

Example

To run the example:

yarn example-watch

Then open http://localhost:1234 in your browser. The page automatically refreshes after making a change.

Styling

You can provide custom styles for most components via the styles prop. Each value of this object in an optional function. The first argument is the default styles and the second is an object of state values specific to that component. The return value is a CSSProperties object.

(base: CSSProperties, state: {}) => CSSProperties;

You can choose to extend the default styles or replace them completely. You almost always want to do the former.

styles={{
  columnReorderOverlay: base => ({
    ...base,
    backgroundColor: 'red',
  })
}}

Be careful when overriding styles completely. Many components apply rules like position: absolute that will break the component if removed.

The Styles type indicates exactly what state values each style callback sends. Some components are unaffected by state, in which case the second argument is omitted completely.

styles={{
  columnResizeHandle: (base, { isDragging }) => ({
    ...base,
    backgroundColor: isDragging ? 'red' : 'blue',
  })
}}

This API is inspired by React Select

Selection Styles

For each selection type there are actually two styles to apply: one for the foreground, another for the background. Typically you want to apply a backgroundColor rules to the background style and borders to the foreground. This prevents elements like images from getting discolored by a partially transparent background overlaying it.

styles={{
  selectionBackground: base => ({
    ...base,
    backgroundColor: 'red',
  })
  selectionForeground: base => ({
    ...base,
    borderTop: '1px dashed blue',
  })
}}

Overriding Borders

When applying custom border styles, it's common to want different styles for different edges. To make overriding default styles easier, internally we use borderBottom, borderLeft, borderRight, and borderTop shorthand, even when all four rules have the same value.

styles={{
  columnHeaderCellContainer: (base, { columnIndex }) => ({
    ...base,
    // Make border between cells 1px while keeping border on leftmost cell.
    borderLeft: columnIndex === 0 ? '1px solid black' : 'none',
  })
}}

Style Keys

• cell
• columnHeaderCellContainer
• columnHeadersContainer
• columnReorderIndicator
• columnReorderOverlay
• columnResizeHandle
• columnResizeIndicator
• copiedRegionBackground
• copiedRegionForeground
• grid
• highlightedRowBackground
• highlightedRowForeground
• primarySelectedCellBackground
• primarySelectedCellForeground
• sectionHeaderCellContainer
• sectionHeadersContainer
• selectionBackground
• selectionForeground