import { useEffect } from 'react'; import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs'; import { Main } from '@strapi/design-system/Main'; import { Button } from '@strapi/design-system/Button'; 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, 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'; import useQueryParams from '../../hooks/useQueryParams'; import DynamicTable from './index'; # DynamicTable TODO... ## Imports ```js import { DynamicTable } from '@strapi/helper-plugin'; ``` ## Usage Loading {() => { 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__', }, ]; return (
); }} ## Usage No content {() => { 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__', }, ]; return (
); }} ## 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 {() => { 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 (
); }} ## Usage with delete action {() => { 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 rows = [ { id: 1, firstname: 'soup', lastname: 'soup', email: 'soup@strapi.io' }, { id: 2, firstname: 'm', lastname: 'frachet', email: 'm@strapi.io' }, { id: 3, firstname: 'hicham', lastname: 'ELBSI', email: 'helbsi@strapi.io' }, ]; const TableRows = ({ headers, entriesToDelete, onClickDelete, onSelectRow, rows, withMainAction, withBulkActions, }) => { return ( {rows.map(data => { const isChecked = entriesToDelete.findIndex(id => id === data.id) !== -1; return ( {withMainAction && ( { onSelectRow({ name: data.id, value: !isChecked }); }} /> )} {headers.map(({ key, cellFormatter, name, ...rest }) => { return ( {data[name] || '-'} ); })} {withBulkActions && ( console.log(`${pathname}/${data.id}`)} label={`Edit ${data.firstname} ${data.lastname}`} noBorder icon={} /> onClickDelete(data.id)} label={`Delete ${data.firstname} ${data.lastname}`} noBorder icon={} /> )} ); })} ); }; return (
{ alert(`Delete ${ids.join(' ')}`); }} onConfirmDelete={id => { alert(`Delete ${id}`); }} rows={rows} withMainAction withBulkActions >
); }} ## Usage with delete action with custom modal {() => { 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 rows = [ { id: 1, firstname: 'soup', lastname: 'soup', email: 'soup@strapi.io' }, { id: 2, firstname: 'm', lastname: 'frachet', email: 'm@strapi.io' }, { id: 3, firstname: 'hicham', lastname: 'ELBSI', email: 'helbsi@strapi.io' }, ]; const TableRows = ({ headers, entriesToDelete, onClickDelete, onSelectRow, rows, withMainAction, withBulkActions, }) => { return ( {rows.map(data => { const isChecked = entriesToDelete.findIndex(id => id === data.id) !== -1; return ( {withMainAction && ( { onSelectRow({ name: data.id, value: !isChecked }); }} /> )} {headers.map(({ key, cellFormatter, name, ...rest }) => { return ( {data[name] || '-'} ); })} {withBulkActions && ( console.log(`${pathname}/${data.id}`)} label={`Edit ${data.firstname} ${data.lastname}`} noBorder icon={} /> onClickDelete(data.id)} label={`Delete ${data.firstname} ${data.lastname}`} noBorder icon={} /> )} ); })} ); }; return (
{ return ( Are you sure? Cancel } endAction={ } /> ); }, }} onConfirmDeleteAll={ids => { alert(`Delete ${ids.join(' ')}`); }} onConfirmDelete={id => { alert(`Delete ${id}`); }} rows={rows} withMainAction withBulkActions >
); }} ### Props