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