如何在数据表中显示大量数据

时间:2018-11-30 18:45:11

标签: react-native

我想在数据表的单个屏幕中显示大量数据,在这里我可以对数据进行排序,搜索数据,过滤数据并向表中添加页脚,该页脚始终在底部可见

data table like this

1 个答案:

答案 0 :(得分:0)

您可以使用此https://callstack.github.io/react-native-paper/data-table.html
它在桌子上提供分页。

import * as React from 'react';
import { DataTable } from 'react-native-paper';

export default class MyComponent extends React.Component {
  render() {
    return (
      <DataTable>
        <DataTable.Header>
          <DataTable.Title>Dessert</DataTable.Title>
          <DataTable.Title right>Calories</DataTable.Title>
          <DataTable.Title right>Fat</DataTable.Title>
        </DataTable.Header>

        <DataTable.Row>
          <DataTable.Cell>Frozen yogurt</DataTable.Cell>
          <DataTable.Cell right>159</DataTable.Cell>
          <DataTable.Cell right>6.0</DataTable.Cell>
        </DataTable.Row>

        <DataTable.Row>
          <DataTable.Cell>Ice cream sandwich</DataTable.Cell>
          <DataTable.Cell right>237</DataTable.Cell>
          <DataTable.Cell right>8.0</DataTable.Cell>
        </DataTable.Row>

        <DataTable.Pagination
          page={1}
          numberOfPages={3}
          onPageChange={(page) => { console.log(page); }}
          label="1-2 of 6"
        />
      </DataTable>
    );
  }
}