Использование реактивной таблицы CellPropGetter - PullRequest
Новая
       11

Использование реактивной таблицы CellPropGetter

0 голосов
/ 17 апреля 2020

Я создал следующий компонент: 

import React from 'react';
import { ColumnInstance, TableInstance, UseFiltersColumnProps, UseSortByColumnProps } from 'react-table';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import TableBody from '@material-ui/core/TableBody';
import Table from '@material-ui/core/Table';

interface TableColumn<D extends object = {}>
  extends ColumnInstance<D>,
    UseSortByColumnProps<D>,
    UseFiltersColumnProps<D> {}

const SortedTable: React.FC<TableInstance<object>> = ({ getTableProps, headers, rows, prepareRow }) => {
  return (
    <Table {...getTableProps()}>
      <TableHead>
        <TableRow>
          {headers.map((c: any) => {
            const column = (c as unknown) as TableColumn<object>;
            return (
              <TableCell
                {...column.getHeaderProps(column.getSortByToggleProps())}
                sortDirection={column.isSorted ? (column.isSortedDesc ? 'desc' : 'asc') : false}
              >
                {column.canSort && (
                  <TableSortLabel active={column.isSorted} direction={column.isSortedDesc ? 'desc' : 'asc'}>
                    {column.render('Header')}
                  </TableSortLabel>
                )}
              </TableCell>
            );
          })}
        </TableRow>
      </TableHead>
      <TableBody>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <TableRow {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <TableCell {...cell.getCellProps()}>{cell.render('Cell')}</TableCell>;
              })}
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
};

export default SortedTable;

Я использую этот компонент другими компонентами и передаю ему useTable хук.

Я пытаюсь передать align: 'right' некоторым компонентов TableCell, увеличивая react-table функцию getCellProps, но я просто не могу.

Есть идеи как?

...