I am using ReactTable and I need to create some summary in the end.

It should be visible every time also when pagination is there. Is it possible to achieve it with react table? I can partly solve it by creating next table. But I did not find the way how to hide header. Another problem is when resizing columns width, then it is not applied to another table.

Example table

| id | product | stock data | price |
|  1 | apple   | 1          | 123   |
|  2 | pie     | 2          | 22    |
...
|prev page |   2 / 5    | next page |
|    | summary |            | 145   |

or that summary can be above of pagination

I am using ReactTable and I need to create some summary in the end.

It should be visible every time also when pagination is there. Is it possible to achieve it with react table? I can partly solve it by creating next table. But I did not find the way how to hide header. Another problem is when resizing columns width, then it is not applied to another table.

Example table

| id | product | stock data | price |
|  1 | apple   | 1          | 123   |
|  2 | pie     | 2          | 22    |
...
|prev page |   2 / 5    | next page |
|    | summary |            | 145   |

or that summary can be above of pagination

• javascript
• css
• reactjs
• tabular

2 Answers 2

To add a footer on your ReactTable, simply define a Footer property on your columns props. You can set a simple text like Summary, JSX, or even another ponent.

Here's an example like yours:

import React from "react";
import { render } from "react-dom";
import ReactTable from "react-table";
import "react-table/react-table.css";

const data = [
  {
    id: 1,
    product: "apple",
    stock: 1,
    price: 123
  },
  {
    id: 2,
    product: "pie",
    stock: 2,
    price: 22
  }
];

const App = () => (
  <div>
    <ReactTable 
      data={data}
      columns={[
        {
          Header: "Id",
          accessor: "id"
        },
        {
          Header: "Product",
          accessor: "product",
          Footer: "Summary" // Render simple text on the footer
        },
        {
          Header: "Stock",
          accessor: "stock"
        },
        {
          Header: "Price",
          accessor: "price",
          Footer: (
            <span>{
              // Get the total of the price
              data.reduce((total, { price }) => total += price, 0)
            }</span>
          )
        }
      ]}
      defaultPageSize={2}
    />
  </div>
);

render(<App />, document.getElementById("root"));

Hope this gives you an idea.

The solution is footer. https://react-table.js/#/story/footers Please see if it fits to your use case.