diff --git a/assets/js/common/Table/Pagination.jsx b/assets/js/common/Table/Pagination.jsx index 8f01ebd701..22344a6ba9 100644 --- a/assets/js/common/Table/Pagination.jsx +++ b/assets/js/common/Table/Pagination.jsx @@ -6,7 +6,7 @@ const getPagesArray = (pages) => Array.from({ length: pages }, (_, i) => 1 + i); function Pagination({ pages, currentPage, onSelect }) { const pagesList = getPagesArray(pages); return ( -
+
{pagesList.map((pageNumber) => { diff --git a/assets/js/common/Table/Table.jsx b/assets/js/common/Table/Table.jsx index f3b658a09f..a4d739f16b 100644 --- a/assets/js/common/Table/Table.jsx +++ b/assets/js/common/Table/Table.jsx @@ -62,6 +62,7 @@ function Table({ setSearchParams, emptyStateText = 'No data available', withPadding = true, + header = null, rowKey = defaultRowKey, }) { const { @@ -82,6 +83,8 @@ function Table({ (c) => c.filter && c.filterFromParams ); + const hasFilters = columns.filter(({ filter }) => Boolean(filter)).length > 0; + useEffect(() => { if (!searchParamsEnabled) return; const filtersBoundToQs = filters.reduce((acc, curr) => { @@ -158,7 +161,13 @@ function Table({ 'pt-4': withPadding, })} > -
+
+ {header} diff --git a/assets/js/common/Table/Table.stories.jsx b/assets/js/common/Table/Table.stories.jsx index 982c75ed68..2912462248 100644 --- a/assets/js/common/Table/Table.stories.jsx +++ b/assets/js/common/Table/Table.stories.jsx @@ -107,6 +107,17 @@ export function WithFilters(args) { return
; } +export function WithHeader(args) { + return ( +
Header} + {...args} + /> + ); +} + export function Empty() { return
; } diff --git a/assets/js/common/Table/Table.test.jsx b/assets/js/common/Table/Table.test.jsx index 4fd5bad593..5bf65d8139 100644 --- a/assets/js/common/Table/Table.test.jsx +++ b/assets/js/common/Table/Table.test.jsx @@ -80,6 +80,22 @@ describe('Table component', () => { .forEach((tableRow) => expect(tableRow).toHaveClass(customRowClassName)); }); + it('should display the header', () => { + const data = tableDataFactory.buildList(10); + const headerText = faker.person.firstName(); + + render( +
{}} + header={

{headerText}

} + /> + ); + + expect(screen.queryByText(headerText)).toBeInTheDocument(); + }); + describe('filtering', () => { it('should filter by the chosen filter option with default filter', async () => { const data = tableDataFactory.buildList(10);