Frozen Header Table

react-apollo-flexi-table

Target Features

  • table like (share field width)
  • frozen header
  • scrollable list
  • bind with apollo (fetchMore)

Motivation

flex 1

flex 1

70px

<div style={styles.tableHeaderWrapper}>
  <div style={[styles.tableField, { flex: 1 }]}>
    <span style={styles.tableFieldText}>
      名稱
    </span>
  </div>
  <div style={[styles.tableField, { flex: 1 }]}>
    <span style={styles.tableFieldText}>
      時間場次
    </span>
  </div>
  <div style={[styles.tableField, { width: 70 }]> 
    <span style={styles.tableFieldText}>
      人數
    </span>
  </div>
</div>
<div style={styles.tableWrapper}>
  <div style={styles.tableHeaderWrapper}>
    <div style={[styles.tableField, { flex: 1 }]}>
      <span style={styles.tableFieldText}>
        名稱
      </span>
    </div>
    <div style={[styles.tableField, { flex: 1 }]}>
      <span style={styles.tableFieldText}>
        時間場次
      </span>
    </div>
    <div style={[styles.tableField, { width: 70 }]> 
      <span style={styles.tableFieldText}>
        人數
      </span>
    </div>
  </div>
  <div id="table-scroller" style={styles.tableListWrapper}>
    <div style={[styles.tableField, { flex: 1 }]}>
      <span style={styles.tableFieldText}>
        {name}
      </span>
    </div>
    ...
    ...
  </div>
</div>

share styles ?

export default {
  tableFrozenHeader: {
    /* styles */
  },
  tableField: {
    /* styles */
  },
};

styles/table.js

Componentization ?

<div style={styles.tableWrapper}>
  <TableHeader
    titles={[{ name: '名稱', style: { flex: 1 } }]} />
  <TableList
    list={list.map(...)} />
</div>
<div style={styles.tableWrapper}>
  <Table />
  {/*
    how to pass props ?
    If I want a button inside ?
  */}
</div>
<div style={styles.tableWrapper}>
  <TableHeader
    titles={[{ name: '名稱', style: { flex: 1 } }]} />
  <div id="table-scroller" style={styles.tableListWrapper}>
    <div style={[styles.tableField, { flex: 1 ]}>
      ...
    </div>
    ...
    <button />
  </div>
</div>

fetchMore ?

Core

import { Table, TableField } from 'react-apollo-flexi-table';

<Table>
  <TableField />
  <TableField />
</Table> 

Table

TableField

  • dataSource
  • actions
  • placeholder
  • fetchMore
  • table styles
  • field name
  • field data
  • flex
  • custom component

... other field settings

Props

Table

dataSource

actions

styles

...

children

TableHeader

context

TableList

context

context

  • Field settings:  children.props
  • Table data:       dataSource

placeholder

context

showPlaceholder

Styles

Problems

<Table
  dataSource={DATA}
  {...tableProps}>
  <TableField />
  <Mutation mutate={MUTATION}>
    {mutate => (
       <TableField
          name="status"
          fieldKey="status"
          mutate={mutate}
          Component={MY_COMPONENT} />
    )}
  </Mutation>
</Table>

Mutation

<Table
  dataSource={DATA}
  {...tableProps}>
  <TableField />
  <TableField
     name="status"
     fieldKey="status"
     mutate={mutate}
     Component={props => (
       <Mutation mutate={MUTATION}>
         {mutate => (
            <MyComponent
              {...props}
              mutate={mutate} />
         )}
       </Mutation>
     )} />
</Table>

FetchMore & Reach End

{
  data: {
    getActivities: [{ ... }]
  }
}
{
  data: {
    getAuthors: {
       count: 5,
       results: [{ ... }]
    }
  }
}

FetchMore & Reach End

From apollo

From state

  • offset: 0, limit: 10 => offset: 0, limit: 20 ?
  • offset: 0, limit: 10 => offset: 10, limit: 10 ?
  • length fully equal === reach end ?
  • length empty === reach end ?
const fetchMoreResponse = await fetchMore();

Frozen Header Table

By Travor Lee

Frozen Header Table

library: react-apollo-flexi-table

  • 124