Skip to content

Add support for a footer row #1235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

jcognard-actinvision
Copy link

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.

Copy link

netlify bot commented May 30, 2024

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

Name Link
🔨 Latest commit 9b28456
🔍 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...

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
Copy link
Owner

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

@jbetancur jbetancur self-assigned this Aug 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants