CODEWITHSUNDEEP
react-native
Banid Azin
Banid Azin

Reputation: 190

How to display large set of data in a data table

I want to show large set of data in a single screen in data table where I can sort data, search data, filter data and add a footer to the table that is always visible at the bottom

data table like this

Upvotes: 1

Views: 2353

Answers (1)

Burhan Yılmaz
Burhan Yılmaz

Reputation: 804

You can use this https://callstack.github.io/react-native-paper/data-table.html.
It provides pagination on the table.

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>
    );
  }
}

Upvotes: 1

Related Questions