Other Features

Table Footer

Description

There is already an example in the tag component about the footer. However, it doesn't support the filtering option. it's not changed based on the filtered data.

Usage example

Code

import CustomDataTable from "@components/custom-data-table/CustomDataTable";
import { Format } from "@tag/tag-components-react-v4";
function Demo() {
  const data = [
    {
      id: 1,
      name: "Bob",
      score: 10.5,
    },
    {
      id: 2,
      name: "Jane",
      score: 12,
    },
    {
      id: 3,
      name: "Fred",
      score: 9.5,
    },
  ];
  const columns = [
    {
      accessorKey: "name",
      header: "Name",
      footer: (props) => {
        return (
          <div
            style={{
              textAlign: "left",
              fontWeight: "bold",
            }}
          >
            <b>Total</b>
          </div>
        );
      },
    },
    {
      accessorKey: "score",
      header: "Score",
      meta: { dataType: "decimal" },
      footer: (props) => {
        const { rows } = props.table.getFilteredRowModel();
        return (
          <div
            style={{
              textAlign: "right",
              fontWeight: "bold",
            }}
          >
            <Format
              dataType={"decimal"}
              value={rows.reduce((sum, row) => sum + row.original["score"], 0)}
            />
          </div>
        );
      },
    },
  ];
  const options = {
    data: data,
    columns: columns,
  };
  return (
    <div style={{ maxWidth: "200px" }}>
      <CustomDataTable options={options}></CustomDataTable>
    </div>
  );
}

Result

Name	Score
Bob	10.5
Jane	12
Fred	9.5
Total	32