Add support for a footer row

src/DataTable/DataTable.tsx

@@ -1,37 +1,41 @@
 import * as React from 'react';
 import { ThemeProvider } from 'styled-components';
-import { tableReducer } from './tableReducer';
+import useColumns from '../hooks/useColumns';
+import useDidUpdateEffect from '../hooks/useDidUpdateEffect';
+import { CellBase } from './Cell';
+import NoData from './NoDataWrapper';
+import NativePagination from './Pagination';
+import ProgressWrapper from './ProgressWrapper';
+import ResponsiveWrapper from './ResponsiveWrapper';
 import Table from './Table';
-import Head from './TableHead';
-import HeadRow from './TableHeadRow';
-import Row from './TableRow';
+import Body from './TableBody';
 import Column from './TableCol';
 import ColumnCheckbox from './TableColCheckbox';
+import ColumnExpander from './TableColExpander';
+import Foot from './TableFoot';
+import FootRow from './TableFootRow';
+import TableFooterCell from './TableFooterCell';
+import Head from './TableHead';
+import HeadRow from './TableHeadRow';
 import Header from './TableHeader';
+import Row from './TableRow';
 import Subheader from './TableSubheader';
-import Body from './TableBody';
-import ResponsiveWrapper from './ResponsiveWrapper';
-import ProgressWrapper from './ProgressWrapper';
 import Wrapper from './TableWrapper';
-import ColumnExpander from './TableColExpander';
-import { CellBase } from './Cell';
-import NoData from './NoDataWrapper';
-import NativePagination from './Pagination';
-import useDidUpdateEffect from '../hooks/useDidUpdateEffect';
-import { prop, getNumberOfPages, sort, isEmpty, isRowSelected, recalculatePage } from './util';
 import { defaultProps } from './defaultProps';
 import { createStyles } from './styles';
+import { tableReducer } from './tableReducer';
 import {
 	Action,
 	AllRowsAction,
 	SingleRowAction,
-	TableRow,
 	SortAction,
+	SortOrder,
 	TableProps,
+	TableRow,
 	TableState,
-	SortOrder,
 } from './types';
-import useColumns from '../hooks/useColumns';
+import { getNumberOfPages, isEmpty, isRowSelected, prop, recalculatePage, sort } from './util';
+import { STOP_PROP_TAG } from './constants';
 
 function DataTable<T>(props: TableProps<T>): JSX.Element {
 	const {
@@ -81,6 +85,7 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 		noHeader = defaultProps.noHeader,
 		fixedHeader = defaultProps.fixedHeader,
 		fixedHeaderScrollHeight = defaultProps.fixedHeaderScrollHeight,
+		showFooter = defaultProps.showFooter,
 		pagination = defaultProps.pagination,
 		subHeader = defaultProps.subHeader,
 		subHeaderAlign = defaultProps.subHeaderAlign,
@@ -280,6 +285,14 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 		return false;
 	};
 
+	const showTableFoot = () => {
+		if (!showFooter) {
+			return false;
+		}
+
+		return sortedData.length > 0 && !progressPending;
+	};
+
 	// recalculate the pagination and currentPage if the rows length changes
 	if (pagination && !paginationServer && sortedData.length > 0 && tableRows.length === 0) {
 		const updatedPage = getNumberOfPages(sortedData.length, rowsPerPage);
@@ -489,6 +502,30 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 								})}
 							</Body>
 						)}
+
+						{showTableFoot() && (
+							<Foot className="rdt_TableFoot" role="rowgroup">
+								<FootRow className="rdt_TableFootRow" role="row" $dense={dense}>
+									{selectableRows && <CellBase style={{ flex: '0 0 48px' }} />}
+									{showFooter &&
+										tableColumns.map(column => (
+											<TableFooterCell<T>
+												id={column.id as string}
+												key={column.id}
+												dataTag={column.ignoreRowClick || column.button ? null : STOP_PROP_TAG}
+												column={column}
+												rows={tableRows}
+												isDragging={false}
+												onDragStart={handleDragStart}
+												onDragOver={handleDragOver}
+												onDragEnd={handleDragEnd}
+												onDragEnter={handleDragEnter}
+												onDragLeave={handleDragLeave}
+											/>
+										))}
+								</FootRow>
+							</Foot>
+						)}
 					</Table>
 				</Wrapper>
 			</ResponsiveWrapper>

src/DataTable/TableFoot.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Foot = styled.div`
+	display: flex;
+	width: 100%;
+	${({ theme }) => theme.foot.style};
+`;
+
+export default Foot;

src/DataTable/TableFootRow.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const FootRow = styled.div<{
+	$dense?: boolean;
+}>`
+	display: flex;
+	align-items: stretch;
+	width: 100%;
+	${({ theme }) => theme.footRow.style};
+	${({ $dense, theme }) => $dense && theme.footRow.denseStyle};
+`;
+
+export default FootRow;

src/DataTable/TableFooterCell.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import styled, { css, CSSObject } from 'styled-components';
+import { CellExtended } from './Cell';
+import { getFooterProperty } from './util';
+import { TableColumn } from './types';
+
+interface FooterCellStyleProps {
+	$renderAsCell: boolean | undefined;
+	$wrapCell: boolean | undefined;
+	$allowOverflow: boolean | undefined;
+	$cellStyle: CSSObject | undefined;
+	$isDragging: boolean;
+}
+
+const overflowCSS = css<FooterCellStyleProps>`
+	div:first-child {
+		white-space: ${({ $wrapCell }) => ($wrapCell ? 'normal' : 'nowrap')};
+		overflow: ${({ $allowOverflow }) => ($allowOverflow ? 'visible' : 'hidden')};
+		text-overflow: ellipsis;
+	}
+`;
+
+const FooterCellStyle = styled(CellExtended).attrs(props => ({
+	style: props.style,
+}))<FooterCellStyleProps>`
+	${({ $renderAsCell }) => !$renderAsCell && overflowCSS};
+	${({ theme, $isDragging }) => $isDragging && theme.cells.draggingStyle};
+	${({ $cellStyle }) => $cellStyle};
+`;
+
+interface FooterCellProps<T> {
+	id: string;
+	dataTag: string | null;
+	column: TableColumn<T>;
+	rows: Array<T>;
+	isDragging: boolean;
+	onDragStart: (e: React.DragEvent<HTMLDivElement>) => void;
+	onDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
+	onDragEnd: (e: React.DragEvent<HTMLDivElement>) => void;
+	onDragEnter: (e: React.DragEvent<HTMLDivElement>) => void;
+	onDragLeave: (e: React.DragEvent<HTMLDivElement>) => void;
+}
+
+function FooterCell<T>({
+	id,
+	column,
+	rows,
+	dataTag,
+	isDragging,
+	onDragStart,
+	onDragOver,
+	onDragEnd,
+	onDragEnter,
+	onDragLeave,
+}: FooterCellProps<T>): JSX.Element {
+	return (
+		<FooterCellStyle
+			id={id}
+			data-column-id={column.id}
+			role="cell"
+			className="rdt_TableFooterCell"
+			data-tag={dataTag}
+			$cellStyle={column.style}
+			$renderAsCell={!!column.cell}
+			$allowOverflow={column.allowOverflow}
+			button={column.button}
+			center={column.center}
+			compact={column.compact}
+			grow={column.grow}
+			hide={column.hide}
+			maxWidth={column.maxWidth}
+			minWidth={column.minWidth}
+			right={column.right}
+			width={column.width}
+			$wrapCell={column.wrap}
+			$isDragging={isDragging}
+			onDragStart={onDragStart}
+			onDragOver={onDragOver}
+			onDragEnd={onDragEnd}
+			onDragEnter={onDragEnter}
+			onDragLeave={onDragLeave}
+		>
+			<div data-tag={dataTag}>{getFooterProperty(rows, column.footerContent)}</div>
+		</FooterCellStyle>
+	);
+}
+
+export default React.memo(FooterCell) as typeof FooterCell;

src/DataTable/__tests__/DataTable.test.tsx

@@ -2178,6 +2178,24 @@ describe('DataTable::fixedHeader', () => {
 	});
 });
 
+describe('DataTable::footer', () => {
+	test('should render correctly when a footer is enabled', () => {
+		const mock = dataMock();
+		const { container } = render(<DataTable data={mock.data} columns={mock.columns} showFooter />);
+
+		expect(container.firstChild).toMatchSnapshot();
+	});
+
+	test('should render correctly when a footer is enabled and footer cells contain content', () => {
+		const mock = dataMock({
+			footerContent: () => `footer`,
+		});
+		const { container } = render(<DataTable data={mock.data} columns={mock.columns} showFooter />);
+
+		expect(container.firstChild).toMatchSnapshot();
+	});
+});
+
 describe('DataTable::striped', () => {
 	test('should render correctly when striped', () => {
 		const mock = dataMock();