Big Table
Table of Content
Data Structure
Column Definition
Each element within fixedColDataKey
and fluidColDataKey
should be formed in following format:
Immutable
Components
Content
<Table>
Store sort key, and pass sorted data to children
<Table metaData: ImmutableRecord data: ImmutableList<ImmutableMap> // viewable width viewWidth: Number scrollLeft: Number widthPadding: Number // default 0 rowHeightHeader: Number // default: 28 rowHeightBody: Number // default: 20 updateDataKey: Function<updater: Function<dataKey: ImmutableList<String>>> updateContentView: Function<param: Object height: Number > sortKey: String // the current sorted column key sortOrder: Number // 1 or -1, 1 is ASC, -1 is Desc updateSort: Function<updater: Function<sortKey sortOrder>> rowHeightFn: Function<rowData: ImmutableList<String>> rowModifier: Function<rowData: ImmutableList<String>>: Function<Row: ReactElement>>
Example
<WindowTable>
WindowTable is like Table, but it will be constraint by props viewHeight, and vertscroll poition will controlled by scrollTop
<WindowTable ... viewHeight: Number scrollTop: Number // between 0 and 1 updateContentView: Function<updater: Function<height>>>
Example
Scrolling Control
<VerticalScroll>
A vertical scroll that listen parentNode's wheel event.
<VerticalScroll enableWheel: Boolean viewHeight: Number // viewable height contentHeight: Number // total height position: Number onScroll: Function<position: Number>/>
Example
console.log(position)}/>
<HorizontalScroll>
A horizontal scroll that listen parentNode's wheel event.
<HorizontalScroll enableWheel: Boolean viewWidth: Number // visable width (a.k.a remain viewable width) = viewable width - fixed columns width contentWidth: Number //total width (don't count fixed column width) position: Number onScroll: Function<position: Number>/>
Example
console.log(position)}/>
Low-level Components
<TableHeader>
A component which store how to sort data, adjust width and custom render info.
<TableHeader metaData: ImmutableRecord scrollLeft: Number viewWidth: Number // viewable width widthPadding: Number rowHeight: Number sortKey: String sortOrder: Number updateSort: Function<param: Object sortKey: String sortOrder: Number > updateDataKey: Function<dataKey: ImmutableList<String>>/>
Example
<Row>
A component which adjust width for each, calculate width for FixedCol
, adjust the left offset of Col
and redner all cells and pass those data to Col
and FixedCol
.
<Row metaData: ImmutableRecord data: ImmutableMap offset: Number width: Number widthPadding: Number height: Number style: Object modifier: Function<data: ImmutableList<String>>: Function<Row: ReactElement>/>
Example
<Rows>
The main difference between Rows and Row is that Rows will wrap all row into a col, which make is horiziontal scroll more efficiently.
In addition, Rows don't have modifier
, but it has rowHeightFn
to control individual row height.
<Rows data: ImmutableList<ImmutableMap> metaData: ImmutableRecord offset: Number width: Number widthPadding: Number height: Number style: Object rowHeightFn: Function<data: ImmutableMap>: Number/>
Example
<FixedCol>
A component which group all cell which is fixed.
{ReactElement}
<Cell>
A component which make all content styled.
Default style:
{ReactElement}
Miscellaneous
<AutoSizer>
A component which get available width / height.
We copy the implement from https://github.com/bvaughn/react-virtualized/blob/master/source/AutoSizer/AutoSizer.js
<AutoSizer onResize: Function<size: Object height: Number width: Number >> ...</AutoSizer>
Example
<KeySorter>
<KeySorter dataKey: ImmutableList<String> onChange: Function<dataKey: String>/>
Development
Setup:
$ yarn
Run:
$ npm run start
And open storybook with browser: http://localhost:9001/
Publish
$ npm publish
LICENSE
MIT