yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-25 16:29:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12883 from MattieBelt/fix/dynamic-table-footer

Browse Source 
Add footer to DynamicTable component
This commit is contained in:
Gustav Hansen 2022-03-21 10:00:33 +01:00 committed by GitHub
commit 960520c086
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/core/helper-plugin/lib/src/components/DynamicTable/DynamicTable.stories.mdx
View File

@ -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>

11
packages/core/helper-plugin/lib/src/components/DynamicTable/index.js
View File

@ -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,