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'; +## Usage 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 ( +
+ + }>Add another user}/> + +
+ ); + }} +
+
+ ## Usage No content with filters 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 = ({ )} - + {}, @@ -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,