Add header prop to table (#2337)

trento-project · Feb 19, 2024 · 2c9056e · 2c9056e
1 parent 3a990fb
commit 2c9056e
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 2 deletions.
diff --git 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 (
-    <div className="grid py-2 bg-gray-50 rounded-lg">
+    <div className="grid py-2 bg-gray-50">
       <div className="justify-self-end pr-2">
         <div className="flex items-center">
           {pagesList.map((pageNumber) => {

diff --git 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,
           })}
         >
-          <div className="min-w-fit shadow rounded-lg">
+          <div
+            className={classNames(
+              'min-w-fit shadow rounded-b-lg overflow-hidden',
+              { 'rounded-t-lg': !hasFilters }
+            )}
+          >
+            {header}
             <table className="min-w-full leading-normal table-fixed">
               <thead>
                 <tr>

diff --git 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 <Table config={filteredConfig} data={data} {...args} />;
 }
 
+export function WithHeader(args) {
+  return (
+    <Table
+      config={config}
+      data={data}
+      header={<h3 className="bg-white px-4 py-4">Header</h3>}
+      {...args}
+    />
+  );
+}
+
 export function Empty() {
   return <Table config={config} data={[]} />;
 }
diff --git 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(
+      <Table
+        config={tableConfig}
+        data={data}
+        setSearchParams={() => {}}
+        header={<p>{headerText}</p>}
+      />
+    );
+
+    expect(screen.queryByText(headerText)).toBeInTheDocument();
+  });
+
   describe('filtering', () => {
     it('should filter by the chosen filter option with default filter', async () => {
       const data = tableDataFactory.buildList(10);