Add empty state to table (#44)

lojaintegrada · Sep 1, 2021 · 16a12a0 · 16a12a0
1 parent cbcecd2
commit 16a12a0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git 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
@@ -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 (
     <div className="max-w-full overflow-x-auto">
       <table
@@ -109,12 +108,22 @@ const TableComponent = ({
         <tbody {...getTableBodyProps()} className="text-sm text-on-base">
           {isLoading ? (
             <tr>
-              <td>
+              <td colSpan={columns.length || 1} className={`${TdClasses}`}>
                 <TdWrapper>
                   <LoadingPlaceholder />
                 </TdWrapper>
               </td>
             </tr>
+          ) : !rows || !rows.length ? (
+            <tr>
+              <td colSpan={columns.length || 1} className={`${TdClasses}`}>
+                <TdWrapper>
+                  <div className="text-center py-16 text-xl font-semibold text-on-base-2">
+                    {emptyText}
+                  </div>
+                </TdWrapper>
+              </td>
+            </tr>
           ) : (
             rows.map((row) => {
               prepareRow(row)
@@ -129,7 +138,7 @@ const TableComponent = ({
                       <td
                         key={key}
                         {...restCellProps}
-                        className={`p-0 break-words border-t border-card-stroke first:rounded-bl last:rounded-br ${textAligns[textAlign]}`}
+                        className={`${TdClasses} ${textAligns[textAlign]}`}
                       >
                         {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. */