Add support for a footer row

jcognard-actinvision commented 3 months ago

Why

For one of my projects I need to add a footer row to my table and make it configurable by users to display sums, averages and more. There’s already someone asking for a footer row support in #1208

What

This PR aims to enable support for a footer row by accepting a showFooter boolean attribute on DataTable component. The content of the footer cells are defined with the footerContent function on the columns properties, which receives all visible rows as an argument, making possible to calculate sums, for example.

Example

import tableDataItems from '../constants/sampleDesserts';
import DataTable from '../../src/index';

const columns = [
    {
        name: 'Name',
        selector: row => row.name,
        sortable: true,
        fixed: true,
    },
    {
        name: 'Type',
        selector: row => row.type,
        sortable: true,
        fixed: true,
    },
    {
        name: 'Calories (g)',
        selector: row => row.calories,
        sortable: true,
        right: true,
        footerContent: rows => {
            const total = rows.reduce((acc, row) => acc + row.calories, 0);
            return Math.round(total);
        },
    },
];

export const Footer = () => {
    return <DataTable title="Movie List" columns={columns} data={tableDataItems} showFooter />;
};

I hope the quality of code matches your standards as it’s my first contribution.

netlify[bot] commented 3 months ago

Deploy Preview for react-data-table-component ready!

Name	Link
Latest commit	9b28456e0731f50e1bbff879b318ba3ec886f416
Latest deploy log	https://app.netlify.com/sites/react-data-table-component/deploys/667c2b148fc0770008d02367
Deploy Preview	https://deploy-preview-1235--react-data-table-component.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

jbetancur commented 1 week ago

@jcognard-actinvision I've been a "little slow" to respond but I will take a look at this for consideration and review

jbetancur / react-data-table-component