Как уменьшить конкретную высоту строки в таблице React / таблице флажков React

Я использую таблицу React со свойством флажка и хотел уменьшить высоту строки таблицы реакции по умолчанию, чтобы в таблице могло поместиться 20 строк.

Часть кода:

Структура, определяемая столбцом:

function getColumns() {
  const columns = [
    { Header: "From", accessor: "senderID" },
    { Header: "To", accessor: "receiverID" },
    { Header: "Transaction File", accessor: "fileName" },
    { Header: "Transaction Date", accessor: "transationDate" },
    { Header: "Record Count", accessor: "recordCount" },
    { Header: "Status", accessor: "status" }
  ];
  return columns;
}

Моя таблица выглядит так, как показано ниже. Вместо 5-6 строк нужно установить 20 строк в одном макете:

Как уменьшить конкретную высоту строки в таблице React / таблице флажков React

Вы пытались настроить высоту как этот пример в документации?

— 09.03.2019 23:20

попробовал, но высота строки все та же.

— 10.03.2019 00:31

Не могли бы вы предоставить точный фрагмент кода.

— 10.03.2019 00:33

похоже, вам нужно добавить реквизит showPageSizeOptions: true,<ReactTable showPageSizeOptions = {true} columns = {this.getColumns()} />

— 04.06.2019 09:01

reactjs

09.03.2019 23:17

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

5 759

Ответы 1

Попробуйте добавить стили в свойства getTdProps компонента ReactTable.

<ReactTable
         columns = {cData}
         data = {data}
         getTdProps = {(state, rowInfo, column) => ({
              style: {
                height: '20px',
              },
          })}
          minRows = {20}
  />

06.10.2020 15:58

Другие вопросы по теме

ReCaptcha v3 Невидимый компонент React

Необязательный параметр в объекте в функции

Как обернуть компонент React с помощью React.cloneElement с помощью функции?

Meteor/React: ваше приложение вылетает, но исправлена ошибка?

Redux не достигает действия

Bootstrap 4 Навигация по элементам

Поставщик контекста не работает в React.js

Использование LocalNotificationSchedule и уведомлений Firebase в одном и том же собственном приложении React

Как использовать Autosuggest в пользовательском интерфейсе материалов

ExpressJS всегда обслуживает индекс

Как уменьшить конкретную высоту строки в таблице React / таблице флажков React

Ответы 1

Другие вопросы по теме

Похожие вопросы