React Table v7-v8 Grouping(server-side)

Question

ищу примеры варианты решения для данной библиотеки, для Grouping при условии, что, операции группировок будут выполняться на стороне сервера, в документ. примеров реализации нет и в оф. дискорде также ничего нету

Answer 1

import React, {
  useMemo
} from 'react';
import {
  useTable,
  usePagination,
  useSortBy
} from 'react-table';

function Table({
  columns,
  data
}) {
  const memoizedColumns = useMemo(() => columns, [columns]);
  const memoizedData = useMemo(() => data, [data]);

  const tableInstance = useTable({
      columns: memoizedColumns,
      data: memoizedData,
      manualGrouping: true, // включаем опцию manualGrouping
    },
    useSortBy,
    usePagination
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    pageOptions,
    nextPage,
    previousPage,
    canNextPage,
    canPreviousPage,
    page,
    state: {
      pageIndex
    },
  } = tableInstance;

  return ( <
    >
    <
    table { ...getTableProps()
    } >
    <
    thead > {
      headerGroups.map((headerGroup) => ( <
        tr { ...headerGroup.getHeaderGroupProps()
        } > {
          headerGroup.headers.map((column) => ( <
            th { ...column.getHeaderProps(column.getSortByToggleProps())
            }
            className = {
              column.isSorted ? (column.isSortedDesc ? 'desc' : 'asc') : ''
            } >
            {
              column.render('Header')
            } <
            /th>
          ))
        } <
        /tr>
      ))
    } <
    /thead> <
    tbody { ...getTableBodyProps()
    } > {
      rows.map((row, i) => {
        prepareRow(row);
        return ( <
          tr { ...row.getRowProps()
          } > {
            row.cells.map((cell) => {
              return <td { ...cell.getCellProps()
              } > {
                cell.render('Cell')
              } < /td>;
            })
          } <
          /tr>
        );
      })
    } <
    /tbody> <
    /table> <
    div >
    <
    button onClick = {
      () => previousPage()
    }
    disabled = {!canPreviousPage
    } >
    Previous <
    /button> <
    span >
    Page {
      ' '
    } <
    strong > {
      pageIndex + 1
    } of {
      pageOptions.length
    } <
    /strong> <
    /span> <
    button onClick = {
      () => nextPage()
    }
    disabled = {!canNextPage
    } >
    Next <
    /button> <
    /div> <
    />
  );
}

БЛОГ НА HUSL

React Table v7-v8 Grouping(server-side)

Ответы (1 шт):