Add server side pagination

Change-type: minor
Signed-off-by: Andrea Rosci <[email protected]>

Author: JSReds

src/components/Table/TableBase.tsx

@@ -24,6 +24,13 @@ const BaseTableWrapper = styled.div`
 	max-width: 100%;
 	border-bottom: 1px solid ${(props) => props.theme.colors.quartenary.main};
 `;
+export const DEFAULT_ITEMS_PER_PAGE = 50;
+export interface Pagination {
+	currentPage?: number;
+	itemsPerPage: number;
+	totalItems?: number;
+	serverSide?: boolean;
+}
 
 interface InternalTableBaseProps {
 	hasCheckbox: boolean;
@@ -170,7 +177,7 @@ export class TableBase<T extends {}> extends React.Component<
 	}
 
 	public componentDidUpdate(prevProps: TableBaseProps<T>) {
-		const { sort, checkedItems, data, itemsPerPage, rowKey } = this.props;
+		const { sort, checkedItems, data, pagination, rowKey } = this.props;
 		if (sort && !isEqual(prevProps.sort, sort)) {
 			this.setState({
 				sort,
@@ -186,10 +193,12 @@ export class TableBase<T extends {}> extends React.Component<
 			this.setRowSelection(checkedItems);
 		}
 
-		const totalItems = data?.length ?? 0;
+		const totalItems = pagination?.totalItems ?? data?.length ?? 0;
+		const currentPage = pagination?.currentPage ?? this.state.page;
 		if (
-			this.state.page !== 0 &&
-			totalItems <= this.state.page * (itemsPerPage ?? 50)
+			currentPage !== 1 &&
+			totalItems <=
+				currentPage * (pagination?.itemsPerPage ?? DEFAULT_ITEMS_PER_PAGE)
 		) {
 			this.resetPager();
 		}
@@ -464,6 +473,7 @@ export class TableBase<T extends {}> extends React.Component<
 	public toggleSort = (e: React.MouseEvent<HTMLButtonElement>) => {
 		const { field } = e.currentTarget.dataset;
 		const { sort } = this.state;
+		const { pagination } = this.props;
 		if (!field) {
 			return;
 		}
@@ -476,8 +486,9 @@ export class TableBase<T extends {}> extends React.Component<
 		if (sort.field === field) {
 			nextSort = { field: sort.field, reverse: !sort.reverse };
 		}
-
-		this.setState({ sort: nextSort });
+		if (!pagination?.serverSide) {
+			this.setState({ sort: nextSort });
+		}
 
 		if (this.props.onSort) {
 			this.props.onSort(nextSort);
@@ -522,11 +533,12 @@ export class TableBase<T extends {}> extends React.Component<
 		}
 	};
 
-	public setPage = (change: any) => {
-		if (this.props.onPageChange) {
-			this.props.onPageChange(change);
-		}
-
+	public setPage = (change: number) => {
+		const { pagination } = this.props;
+		this.props.onPageChange?.(
+			change,
+			pagination?.itemsPerPage ?? DEFAULT_ITEMS_PER_PAGE,
+		);
 		this.setState({ page: change });
 	};
 
@@ -535,19 +547,20 @@ export class TableBase<T extends {}> extends React.Component<
 	};
 
 	public incrementPage = () => {
-		this.setPage(this.state.page + 1);
+		const newPage = this.state.page + 1;
+		this.setPage(newPage);
 	};
 
 	public decrementPage = () => {
-		this.setPage(this.state.page - 1);
+		const newPage = this.state.page - 1;
+		this.setPage(newPage);
 	};
 
 	public render() {
 		const {
 			columns,
 			data,
 			usePager,
-			itemsPerPage,
 			pagerPosition,
 			rowAnchorAttributes,
 			rowKey,
@@ -557,20 +570,26 @@ export class TableBase<T extends {}> extends React.Component<
 			getRowClass,
 			className,
 			fuzzyPager,
+			pagination,
 		} = this.props;
 
 		const { page, sort } = this.state;
 		const items = data || [];
-		const totalItems = items.length;
-		const _itemsPerPage = itemsPerPage || 50;
+		const totalItems = pagination?.totalItems ?? items.length;
+		const _itemsPerPage = pagination?.itemsPerPage || DEFAULT_ITEMS_PER_PAGE;
 		const _pagerPosition = pagerPosition || 'top';
 
-		const lowerBound = usePager ? page * _itemsPerPage : 0;
-		const upperBound = usePager
-			? Math.min((page + 1) * _itemsPerPage, totalItems)
-			: totalItems;
+		const lowerBound =
+			!pagination?.serverSide && usePager ? page * _itemsPerPage : 0;
+		const upperBound =
+			!pagination?.serverSide && usePager
+				? Math.min((page + 1) * _itemsPerPage, totalItems)
+				: totalItems;
 
-		const sortedData = this.sortData(items).slice(lowerBound, upperBound);
+		const sortedData =
+			!pagination?.serverSide && usePager
+				? this.sortData(items).slice(lowerBound, upperBound)
+				: items;
 
 		const shouldShowPaper = !!usePager && totalItems > 0;
 
@@ -586,7 +605,7 @@ export class TableBase<T extends {}> extends React.Component<
 							fuzzy={fuzzyPager}
 							totalItems={totalItems}
 							itemsPerPage={_itemsPerPage}
-							page={page}
+							page={pagination?.currentPage ?? page}
 							nextPage={this.incrementPage}
 							prevPage={this.decrementPage}
 							mb={2}
@@ -730,7 +749,7 @@ export interface TableBaseProps<T> {
 	/** A function that is called when a column is sorted */
 	onSort?: (sort: TableSortOptions<T>) => void;
 	/** A function that is called when the page is incremented, decremented and reset */
-	onPageChange?: (page: number) => void;
+	onPageChange?: (page: number, itemsPerPage: number) => void;
 	/** sort options to be used both as a default sort, and on subsequent renders if the passed sort changes */
 	sort?: TableSortOptions<T>;
 	/** Attributes to pass to the anchor element used in a row */
@@ -753,6 +772,8 @@ export interface TableBaseProps<T> {
 	fuzzyPager?: boolean;
 	/** The number of items to be shown per page. Only used if `usePager` is true. Defaults to 50. */
 	itemsPerPage?: number;
+	/** Information from a server side pagination */
+	pagination?: Pagination;
 	/** Sets whether the pager is displayed at the top of the table, the bottom of the table or in both positions. Only used if `usePager` is true. Defaults to `top`. */
 	pagerPosition?: 'top' | 'bottom' | 'both';
 	className?: string;

src/components/Table/index.tsx

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { TableBase, TableBaseProps, TableSortOptions } from './TableBase';
+import {
+	TableBase,
+	TableBaseProps,
+	TableSortOptions,
+	Pagination,
+} from './TableBase';
 import styled, { css } from 'styled-components';
 import keys from 'lodash/keys';
 import pick from 'lodash/pick';
@@ -710,7 +715,6 @@ export class Table<T extends {}> extends React.Component<
 			onRowClick,
 			...props
 		} = this.props;
-
 		const sort =
 			sortProp || (sortingStateRestorationKey ? this.state.sort : undefined);
 
@@ -741,4 +745,10 @@ export class Table<T extends {}> extends React.Component<
 	}
 }
 
-export { TableBaseColumn, TableRow, TableSortOptions, TableSortFunction };
+export {
+	TableBaseColumn,
+	TableRow,
+	TableSortOptions,
+	TableSortFunction,
+	Pagination,
+};

src/components/Table/spec.tsx

@@ -889,8 +889,7 @@ describe('Table component', () => {
 							[{ field: 'Name' }] as Array<TableColumn<PokedexInterface>>
 						}
 						data={PokeDex}
-						usePager
-						itemsPerPage={3}
+						pagination={{ itemsPerPage: 3 }}
 					/>
 				</Provider>,
 			);

src/hooks/useTranslation.tsx

@@ -90,6 +90,7 @@ const translationMap = {
 
 	'warning.etcher_min_requirement': 'Etcher v1.7.2 or greater is required',
 
+	'loading.generic': 'Loading...',
 	'loading.generating_configuration_file': 'Generating configuration file...',
 	'loading.fetching_versions': 'Fetching versions...',
 

src/index.ts

@@ -89,6 +89,7 @@ export {
 	TableSortOptions,
 	TableProps,
 	TableSortFunction,
+	Pagination,
 } from './components/Table';
 
 export { Accordion, AccordionProps } from './components/Accordion';