Как изменить стили кнопок таблицы реагирования? - PullRequest
Новая
       15

Как изменить стили кнопок таблицы реагирования?

0 голосов
/ 21 октября 2018

Кто-нибудь знает способ изменить стили для кнопок «следующий» и «предыдущий» под таблицей реагирования с реагирующая таблица ?

Image of the buttons

Вот краткий пример определенного компонента: 

    <ReactTable
      manual
      minRows={0}
      pageSize={1}
      data={data}
      columns={columns}
      pages={0}
      showPagination={true}
    />

Вот ссылка на codesandbox (песочница для полного примера): https://codesandbox.io/embed/olx7x6jkkz

1 Ответ

0 голосов
/ 26 октября 2018

Я заменил компонент разбивки на страницы по умолчанию на свой собственный компонент разбивки на страницы, основанный на компоненте разбивки на страницы «responsestrap».Замена компонента была простой. 

import ReactTable, { ReactTableDefaults } from 'react-table';
import Pagination from './Pagination.component';

Object.assign(ReactTableDefaults, {
  PaginationComponent: Pagination
});

Тогда код для моего компонента нумерации страниц 

import React, { Component } from 'react';
import classNames from 'classnames';
import { Pagination as BSPagination, PaginationItem, PaginationLink } from 'reactstrap';

const defaultButton = ({ ...props }) => <PaginationLink {...props} />;

export default class ReactTablePagination extends Component {
  constructor(props) {
    super();

    this.getSafePage = this.getSafePage.bind(this);
    this.changePage = this.changePage.bind(this);
    this.applyPage = this.applyPage.bind(this);

    this.state = {
      page: props.page
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ page: nextProps.page });
  }

  getSafePage(page) {
    if (Number.isNaN(page)) {
      page = this.props.page;
    }
    return Math.min(Math.max(page, 0), this.props.pages - 1);
  }

  changePage(page) {
    page = this.getSafePage(page);
    this.setState({ page });
    if (this.props.page !== page) {
      this.props.onPageChange(page);
    }
  }

  applyPage(e) {
    if (e) {
      e.preventDefault();
    }
    const page = this.state.page;
    this.changePage(page === '' ? this.props.page : page);
  }

  getFirstRecord(page, pageSize, totalSize) {
    if (!totalSize) {
      return 0;
    }
    return page * pageSize + 1;
  }

  getLastRecord(page, pageSize, totalSize, currentCount) {
    if (!totalSize) {
      return 0;
    }
    // const rec = (page + 1) * pageSize;
    return this.getFirstRecord(page, pageSize, totalSize) + currentCount - 1;
  }

  getPageElement = index => {
    const { page } = this.props;
    return (
      <PaginationItem key={index}>
        <PaginationLink
          className={classNames({ 'this-page': page === index })}
          onClick={() => this.changePage(index)}
        >
          {index + 1}
        </PaginationLink>
      </PaginationItem>
    );
  };

  pagination = () => {
    const items = [];
    const { page, pageRangeDisplayed, totalSize, pageSize, marginPagesDisplayed } = this.props;

    const BreakView = () => (
      <PaginationItem>
        <PaginationLink disabled>{'...'}</PaginationLink>
      </PaginationItem>
    );

    const pageCount = Math.ceil(totalSize / pageSize);

    if (pageCount <= pageRangeDisplayed) {
      for (let index = 0; index < pageCount; index++) {
        items.push(this.getPageElement(index));
      }
    } else {
      let leftSide = pageRangeDisplayed / 2;
      let rightSide = pageRangeDisplayed - leftSide;

      if (page > pageCount - pageRangeDisplayed / 2) {
        rightSide = pageCount - page;
        leftSide = pageRangeDisplayed - rightSide;
      } else if (page < pageRangeDisplayed / 2) {
        leftSide = page;
        rightSide = pageRangeDisplayed - leftSide;
      }

      let index;
      let currPage;
      let breakView;
      let createPageView = index => this.getPageElement(index);

      for (index = 0; index < pageCount; index++) {
        currPage = index + 1;

        if (currPage <= marginPagesDisplayed) {
          items.push(createPageView(index));
          continue;
        }

        if (currPage > pageCount - marginPagesDisplayed) {
          items.push(createPageView(index));
          continue;
        }

        if (index >= page - leftSide && index <= page + rightSide) {
          items.push(createPageView(index));
          continue;
        }

        if (items[items.length - 1] !== breakView) {
          breakView = <BreakView key={index} />;
          items.push(breakView);
        }
      }
    }

    return items;
  };

  render() {
    const {
      // Computed
      pages,
      // Props
      page,
      pageRangeDisplayed,
      marginPagesDisplayed,
      showPageSizeOptions,
      pageSizeOptions,
      pageSize,
      showPageJump,
      canPrevious,
      canNext,
      onPageSizeChange,
      className,
      totalSize,
      currentCount,
      PreviousComponent = defaultButton,
      NextComponent = defaultButton
    } = this.props;

    const PageItem = defaultButton;

    return (
      <div
        className={classNames({
          'ke-pagination-container': true,
          'd-flex': true,
          'flex-row': true,
          'p-2': true,
          'justify-content-between': true
        })}
      >
        <div className={classNames({ 'paging-buttons': true, 'flex-fill': true })}>
          <BSPagination size="sm">
            <PaginationItem>
              <PageItem
                previous
                onClick={() => {
                  if (!canPrevious) return;
                  this.changePage(page - 1);
                }}
                disabled={!canPrevious}
              >
                {'<'}
              </PageItem>
            </PaginationItem>

            {this.pagination()}

            <PaginationItem>
              <PageItem
                next
                onClick={() => {
                  if (!canNext) return;
                  this.changePage(page + 1);
                }}
                disabled={!canNext}
              >
                {'>'}
              </PageItem>
            </PaginationItem>
          </BSPagination>
        </div>
        {showPageSizeOptions && (
          <span
            className={classNames({
              'flex-fill': true,
              'select-wrap': true,
              '-pageSizeOptions': true,
              'text-center': true
            })}
          >
            <select onChange={e => onPageSizeChange(Number(e.target.value))} value={pageSize}>
              {pageSizeOptions.map((option, i) => (
                // eslint-disable-next-line react/no-array-index-key
                <option key={i} value={option}>
                  {`${option} ${this.props.rowsText}`}
                </option>
              ))}
            </select>
          </span>
        )}
        <div className="flex-fill text-right">
          Showing {this.getFirstRecord(page, pageSize, totalSize)} thru{' '}
          {this.getLastRecord(page, pageSize, totalSize, currentCount)} of {totalSize}
        </div>
      </div>
    );
  }
}

Последний фрагмент - это некоторые дополнительные реквизиты разбиения на страницы, которые автоматически распространятся на новый компонент, отмои настройки ReactTable. 

<ReactTable
  columns={this.columns}
  data={data}
  pages={pages}
  loading={loading}
  onFetchData={this.handleTableChange}
  defaultPageSize={pageSize}
  defaultSorted={sorted}
  filtered={this.state.filtered}
  filtereable
  getTdProps={this.onRowClick}
  getPaginationProps={() => {
    return {
      totalSize: this.state.totalSize,
      currentCount: this.state.currentCount,
      pageRangeDisplayed: 4,
      marginPagesDisplayed: 1
    }
  }}
  manual
  className={classNames({ '-striped': true, '-highlight': true })}
/>

Есть где-нибудь стили, но это суть.Это дает мне макет, как на картинке ниже.

enter image description here

...