react-apollo-flexi-table v0.2.1
React Apollo Flexi Table
A flexible table with frozen header for React and well combined with react-apollo. By using this table, You can easily sharing flex ratio on both table header and table items, and all components are written in hooks.
Usage
import React from 'react';
import { Mutation } from 'react-apollo';
import {
Table,
TableField,
} from 'react-apollo-flexi-table';
function Example() {
return (
<Table
dataSource={[{
id: 1,
name: 'John',
nickname: 'J',
}, {
id: 2,
name: 'Ben',
nickname: 'B',
}]}
fetchMoreHeight={150}
fetchMore={() => { /* do your fetchMore here */ }}>
<TableField
name="User Name"
fieldKey="name"
flex={1}
isCenter />
<TableField
name="Nickname"
fieldKey="nickname"
flex={1.2}
Component={props => (
<Mutation mutation={YOUR_MUTATION}>
{mutate => (
<YourComponent
{...props}
mutate={mutate} />
)}
</Mutation>
)}
</Table>
);
}
Please check my examples folder and you will see more details. https://github.com/travor20814/react-apollo-flexi-table/blob/master/examples/table/FlexiTable.jsx
Options
Table Props
name | type | defaultValue | required |
---|---|---|---|
children | Array<React.Node> | null | v |
dataSource | Array<Object> | [] | v |
actionTitles | Array<string> | [] | |
getActions | Function | () => [] | |
fetchMore | Function | undefined | |
fetchMoreHeight | number | 150 | |
showPlaceholder | boolean | false | |
placeholder | string | null | |
placeholderColor | string | #9b9b9b | |
placeholderWrapperStyle | Object | null | |
placeholderStyle | Object | null | |
headerBackgroundColor | string | transparent | |
headerTextColor | string | #000 | |
headerBorder | string | 0px solid #000 | |
headerBorderRadius | number | 0 | |
headerFontSize | number | 18 | |
headerWrapperStyle | Object | null | |
itemWrapperStyle | Object | null | |
wrapperStyle | Object | null |
TableField Props
name | type | defaultValue | required |
---|---|---|---|
name | string | undefined | v |
fieldKey | string | undefined | v |
flex | number | 1 | |
minWidth | number | auto | |
color | string | #9b9b9b | |
isCenter | boolean | false | |
isImage | boolean | false | |
style | Object | undefined | |
Component | React.Node | null |
Descriptions
Table
children
- You should use our TableField for clearly defining what Table child is.dataSource
- The data list you want to map to the table. You must be careful about thekey
you use. TableField's propfieldKey
will find value base on the object key. (Hint: Each object should have anid
for unique key)actionTitles
- actions will place on the right-hand side of the table. Here you can assign these action fields title.getActions
- You can pass any components you want in a function that return an array of components.fetchMore
- It makes you easily work withreact-apollo
fetchMore
, and it will trigger this function when table'sremain scroll height
is less thanfetchMoreHeight
, which default is 150px.fetchMoreHeight
- Define when should the fetchMore function been triggered when table remain scroll height is less thanfetchMoreHeight
TableField
name
- Define field name you want to show on the header.fieldKey
- Define whatdataSource
key you want to take.flex
- Define field flex in the table. It will helps you synchronize header flex and item field flex.style
- If you want customizing your field style, you can pass any css style you want to override it.Component
- You can pass your custom component here, and it will replace the origin one. Also, some table useful props will pass into your custom component.