Отобразить динамический размер страницы таблицы, но с ограничением размера и разбиением на страницы

Question

Я использую React Table, и мне нужно динамически устанавливать строки таблицы в зависимости от длины моих данных. вот что я получил:

let pgSize = (data.length > 10) ? 5 : data.length;


 <ReactTable
                data={data} 
                PaginationComponent={Pagination}
                columns={[
                  {
                    columns: [
                     //column defs
                    ]
                  }
                ]}
                defaultPageSize={10}
                pageSize={pgSize}
                className="-striped -highlight"
              />

мне нужно, чтобы строки были динамическими, но если я установлю размер страницы в длину данных. нумерация страниц удаляется, и это будет проблемой, если у меня будет 100 строк данных. Мне нужно максимум 10 в качестве размера страницы по умолчанию. я не могу понять логику сделать это.

Спасибо за помощь!

Answer 1

Проверьте образец таблицы React-Table.

Я немного изменил их код, чтобы он работал в вашей ситуации. Скопируйте и вставьте этот код в их редактор, чтобы увидеть результат.

В конструкторе вы можете изменить makeData(20) на любой объем данных, которые вы хотите.

Обратите внимание, что я полностью удалил defaultPageSize и обрабатываю его через вашего троичного оператора. Ваша таблица увеличится до 10 (размер по умолчанию), но при 11 уменьшится до 5 строк.

import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";

// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: makeData(20)
    };
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        <ReactTable
          data={data}
          pageSize={(data.length > 10) ? 10 : data.length}
          columns={[
            {
              Header: "Name",
              columns: [
                {
                  Header: "First Name",
                  accessor: "firstName"
                },
                {
                  Header: "Last Name",
                  id: "lastName",
                  accessor: d => d.lastName
                }
              ]
            },
            {
              Header: "Info",
              columns: [
                {
                  Header: "Age",
                  accessor: "age"
                },
                {
                  Header: "Status",
                  accessor: "status"
                }
              ]
            },
            {
              Header: 'Stats',
              columns: [
                {
                  Header: "Visits",
                  accessor: "visits"
                }
              ]
            }
          ]}
          className="-striped -highlight"
        />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Answer 2

Ответ Натана работает отлично, но нет необходимости динамически вычислять размер страницы, чтобы решить эту проблему. Более простой метод состоит в том, чтобы определить опору minRows в компоненте таблицы реакции. По умолчанию он не определен, и реагирующая таблица добавит столько пустых строк заполнения, чтобы заполнить вашу страницу, сколько нужно. Определение этого ограничивает количество создаваемых строк заполнения, поэтому вы можете установить его на 0 или 1, чтобы добиться того, что вам нужно, в зависимости от того, хотите ли вы отображать строку заполнения или нет, когда нет строк для отображения.

<ReactTable minRows={1} columns={columns} data={data} />

Answer 3

Чтобы обновить размер страницы ReactTable после первоначального рендеринга, используйте pageSize атрибут:

<ReactTable 
  minRows={0}
  data={data} 
  defaultPageSize={initialSize}
  pageSize={updatedSize}
/>