Отобразить динамический размер страницы таблицы, но с ограничением размера и разбиением на страницы - PullRequest
Новая
       6

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

0 голосов
/ 29 ноября 2018

Я использую 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 в качестве размера страницы по умолчанию.я не могу понять логику сделать это.

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

Ответы [ 2 ]

0 голосов
/ 28 декабря 2018

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

<ReactTable minRows={1} columns={columns} data={data} />
0 голосов
/ 29 ноября 2018

Проверить Таблица образцов 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"));
...