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 the key you use. TableField's prop fieldKey will find value base on the object key. (Hint: Each object should have an id 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 with react-apollo fetchMore, and it will trigger this function when table's remain scroll height is less than fetchMoreHeight, which default is 150px.

• fetchMoreHeight - Define when should the fetchMore function been triggered when table remain scroll height is less than fetchMoreHeight

TableField

• name - Define field name you want to show on the header.

• fieldKey - Define what dataSource 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.