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.

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 will 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

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
• copiedRegionOverlay
• grid
• highlightedRowOverlay
• primarySelectedCellOverlay
• sectionHeaderCellContainer
• sectionHeadersContainer
• selectionOverlay