diff --git a/styleguide/src/Components/Table/Table.stories.tsx b/styleguide/src/Components/Table/Table.stories.tsx index 0e1f9784..a009a54d 100644 --- a/styleguide/src/Components/Table/Table.stories.tsx +++ b/styleguide/src/Components/Table/Table.stories.tsx @@ -122,6 +122,11 @@ export default { // console.log('Selected rows data: ', selectedData) // } }, + argTypes: { + emptyText: { + control: { type: 'text' } + } + }, parameters: { layout: 'padded', } @@ -135,3 +140,8 @@ export const Loading = Template.bind({}) Loading.args = { isLoading: true, } + +export const Empty = Template.bind({}) +Empty.args = { + rows: undefined, +} diff --git a/styleguide/src/Components/Table/Table.tsx b/styleguide/src/Components/Table/Table.tsx index 9f844d9d..c3c1cb38 100644 --- a/styleguide/src/Components/Table/Table.tsx +++ b/styleguide/src/Components/Table/Table.tsx @@ -19,6 +19,7 @@ interface TdWrapperProps { props?: { [key: string]: unknown } } +const TdClasses = `p-0 break-words border-t border-card-stroke first:rounded-bl last:rounded-br` const TdWrapperClasses = `block p-4 no-underline` const TdWrapper = ({ Wrapper, props = {}, children }: TdWrapperProps) => Wrapper ? ( @@ -38,6 +39,7 @@ const TableComponent = ({ // placeholderLength, // placeholderSize, isLoading = false, + emptyText = 'Nenhum registro encontrado', }: TableProps) => { const rowsPropsMemoized = React.useMemo(() => rowsProps, [rowsProps]) @@ -67,9 +69,6 @@ const TableComponent = ({ prepareRow, } = useTable({ columns, data: rowsPropsMemoized }) - // console.log('AAAAA', rows) - // console.log('BBBBB', columnsProps) - return (
{isLoading ? ( - + ) : !rows || !rows.length ? ( + + + ) : ( rows.map((row) => { prepareRow(row) @@ -129,7 +138,7 @@ const TableComponent = ({
+
+ +
+ {emptyText} +
+
+
{cell.render('Cell', { cellWrapperProps: cell.row.original.cellWrapperProps, @@ -194,6 +203,10 @@ export interface TableProps { * @default false */ isLoading?: boolean + /** Content to show when table is empty + * @default 'Nenhum registro encontrado' + */ + emptyText?: string | React.ReactNode // #TODO: /** Mapped rows data returned on select change. */