From 0a5ce6f34a41f9549ba9fa9e4e0276f0e953b088 Mon Sep 17 00:00:00 2001
From: Mattias van den Belt <mattiasvandenbelt@gmail.com>
Date: Sat, 19 Mar 2022 01:47:49 +0100
Subject: [PATCH 1/2] Add footer to DynamicTable component

---
 .../lib/src/components/DynamicTable/index.js          | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/core/helper-plugin/lib/src/components/DynamicTable/index.js b/packages/core/helper-plugin/lib/src/components/DynamicTable/index.js
index 83c9fdf43c..ecf5f2e84d 100644
--- a/packages/core/helper-plugin/lib/src/components/DynamicTable/index.js
+++ b/packages/core/helper-plugin/lib/src/components/DynamicTable/index.js
@@ -23,10 +23,11 @@ const BlockActions = styled(Flex)`
 `;
 
 const Table = ({
+  action,
   children,
   contentType,
   components,
-  action,
+  footer,
   headers,
   isLoading,
   onConfirmDeleteAll,
@@ -159,7 +160,7 @@ const Table = ({
           </Box>
         </Box>
       )}
-      <TableCompo colCount={COL_COUNT} rowCount={ROW_COUNT}>
+      <TableCompo colCount={COL_COUNT} rowCount={ROW_COUNT} footer={footer}>
         <TableHead
           areAllEntriesSelected={areAllEntriesSelected}
           entriesToDelete={entriesToDelete}
@@ -207,12 +208,13 @@ const Table = ({
 };
 
 Table.defaultProps = {
+  action: undefined,
   children: undefined,
   components: {
     ConfirmDialogDeleteAll: undefined,
     ConfirmDialogDelete: undefined,
   },
-  action: undefined,
+  footer: undefined,
   headers: [],
   isLoading: false,
   onConfirmDeleteAll: () => {},
@@ -224,13 +226,14 @@ Table.defaultProps = {
 };
 
 Table.propTypes = {
+  action: PropTypes.node,
   children: PropTypes.node,
   contentType: PropTypes.string.isRequired,
   components: PropTypes.shape({
     ConfirmDialogDelete: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
     ConfirmDialogDeleteAll: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   }),
-  action: PropTypes.node,
+  footer: PropTypes.node,
   headers: PropTypes.arrayOf(
     PropTypes.shape({
       cellFormatter: PropTypes.func,

From 5fab3b5e7a8a11b57193fdde22b29cef35c0614a Mon Sep 17 00:00:00 2001
From: Mattias van den Belt <mattiasvandenbelt@gmail.com>
Date: Sat, 19 Mar 2022 02:02:23 +0100
Subject: [PATCH 2/2] Add DynamicTable with footer Canvas to storybook

---
 .../DynamicTable/DynamicTable.stories.mdx     | 39 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/core/helper-plugin/lib/src/components/DynamicTable/DynamicTable.stories.mdx b/packages/core/helper-plugin/lib/src/components/DynamicTable/DynamicTable.stories.mdx
index 49bc7ecc00..6e882b4b7a 100644
--- a/packages/core/helper-plugin/lib/src/components/DynamicTable/DynamicTable.stories.mdx
+++ b/packages/core/helper-plugin/lib/src/components/DynamicTable/DynamicTable.stories.mdx
@@ -8,7 +8,7 @@ import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
 import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
-import { Tbody, Td, Tr } from '@strapi/design-system/Table';
+import { Tbody, Td, Tr, TFooter } from '@strapi/design-system/Table';
 import { Typography } from '@strapi/design-system/Typography';
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Plus, Pencil, Trash } from '@strapi/icons';
@@ -93,6 +93,43 @@ import { DynamicTable } from '@strapi/helper-plugin';
   </Story>
 </Canvas>
 
+## Usage No content with footer
+
+<Canvas>
+  <Story name="no-content-with-footer">
+    {() => {
+      const headers = [
+        {
+          name: 'firstname',
+          metadatas: { label: 'Firstname', sortable: false },
+          key: '__firstname_key__',
+        },
+        {
+          name: 'lastname',
+          metadatas: { label: 'Email', sortable: false },
+          key: '__lastname_key__',
+        },
+        {
+          name: 'email',
+          metadatas: { label: 'Email', sortable: false },
+          key: '__email_key__',
+        },
+      ];
+      const [{ query }, setQuery] = useQueryParams();
+      useEffect(() => {
+        setQuery({ filters: { $and: [{ firstname: { $eq: 'soupette' } }] } });
+      }, []);
+      return (
+        <Main>
+          <Box paddingTop={6}>
+            <DynamicTable headers={headers} contentType="users" footer={<TFooter icon={<Plus />}>Add another user</TFooter>}/>
+          </Box>
+        </Main>
+      );
+    }}
+  </Story>
+</Canvas>
+
 ## Usage No content with filters
 
 <Canvas>