Question

我有以下代码，我正在尝试添加其他2个功能：排序和过滤。我的数据是使用react-redux-middleware / redux-thunk从API加载的。

我在React中全新，所以我显然很丢失。我正在尝试这个example，但我无法重现它。请有人帮帮我。

非常感谢。

class TabsComponent extends Component {

  componentWillMount(){
    const {dispatch} = this.props
    dispatch(LstData())
  }

  render () {
    const {location, data, item, dispatch, filter} = this.props
    const headers = Object.keys(data.list[0] || {})

    if (!(headers.length && pharmacy.list.length))
      return <div />

    return (
      <Tabs inkBarStyle={{background: '#4CAF50'}}>
        <Tab icon={<FontIcon className="material-icons">local_hospital</FontIcon>} label="Hospital">
          <TextField {...this.props}
            id="text-field-controlled"
            hintText='Type here'
          />
          <Table style={style['table']} >
            <TableBody displayRowCheckbox={false}>
              <TableRow key='first' style={style['row']} selectable={false}>
                {filter.map((column, index) =>
                  <TableRowColumn
                    key={'data-header-column-' + index}
                    style={style['column']['head']}>
                    {LABEL[column]}
                  </TableRowColumn>
                )}
              </TableRow>
              {data.list.map(item => <TableRow key={'data-' + item.id+ '-' + item.townID} style={style['row']}>
                {filter.map(column =>
                  <TableRowColumn
                    key={'data-column-' + item.id+ '-' + item.townID}
                    style={style['column']['label']}>
                    {column.trim() === "" ? '-' : item[column]}
                  </TableRowColumn>
                )}
              </TableRow>)}
            </TableBody>
          </Table>

        </Tab>
      </Tabs>

    )
  }
}

Material UI - 包含过滤器/排序的表组件

0 个答案: