From 5e2e7012201c998eb8379beeffcb774fef66340b Mon Sep 17 00:00:00 2001
From: Sangeeth Sivan <74818788+berzerkeer@users.noreply.github.com>
Date: Tue, 16 Aug 2022 16:48:12 +0530
Subject: [PATCH] feat: added support for loaders / spinners in table
 component. (#15683)

* feat: added loader/spinner support for table

* added empty data state in table

* updated no data UI for table

Co-authored-by: Ankita Kinger <ankita@appsmith.com>
---
 app/client/src/components/ads/Table.tsx | 110 ++++++++++++++++++------
 1 file changed, 83 insertions(+), 27 deletions(-)

diff --git a/app/client/src/components/ads/Table.tsx b/app/client/src/components/ads/Table.tsx
index c060814a5b..1f6f67549b 100644
--- a/app/client/src/components/ads/Table.tsx
+++ b/app/client/src/components/ads/Table.tsx
@@ -4,6 +4,9 @@ import styled from "styled-components";
 import { ReactComponent as DownArrow } from "assets/icons/ads/down_arrow.svg";
 import { ReactComponent as UpperArrow } from "assets/icons/ads/upper_arrow.svg";
 import { Classes } from "./common";
+import Spinner from "./Spinner";
+import { IconSize } from "./Icon";
+import EmptyDataState from "components/utils/EmptyDataState";
 
 const Styles = styled.div`
   table {
@@ -45,11 +48,6 @@ const Styles = styled.div`
 
     tbody {
       tr {
-        td:first-child {
-          color: ${(props) => props.theme.colors.table.rowTitle};
-          font-weight: ${(props) => props.theme.fontWeights[1]};
-        }
-
         td {
           padding: ${(props) => props.theme.spaces[4]}px
             ${(props) => props.theme.spaces[9]}px;
@@ -60,6 +58,19 @@ const Styles = styled.div`
             props.theme.typography.p1.letterSpacing}px;
           font-weight: normal;
           border-bottom: 1px solid ${(props) => props.theme.colors.table.border};
+
+          &:first-child {
+            color: ${(props) => props.theme.colors.table.rowTitle};
+            font-weight: ${(props) => props.theme.fontWeights[1]};
+          }
+
+          &.no-border {
+            border: none;
+
+            .no-data-title {
+              color: ${(props) => props.theme.colors.table.rowData};
+            }
+          }
         }
 
         &:hover {
@@ -69,11 +80,16 @@ const Styles = styled.div`
               fill: ${(props) => props.theme.colors.table.hover.rowTitle};
             }
           }
-          td:first-child {
-            color: ${(props) => props.theme.colors.table.hover.rowTitle};
-          }
           td {
             color: ${(props) => props.theme.colors.table.hover.rowData};
+
+            &:first-child {
+              color: ${(props) => props.theme.colors.table.hover.rowTitle};
+            }
+
+            &.no-border {
+              background-color: var(--appsmith-color-black-0);
+            }
           }
         }
       }
@@ -84,13 +100,31 @@ const Styles = styled.div`
 const HiddenArrow = styled(DownArrow)`
   visibility: hidden;
 `;
+
+const CentralizedWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 250px;
+`;
+
 export interface TableProps {
   data: any[];
   columns: any[];
+  isLoading?: boolean;
+  loaderComponent?: JSX.Element;
+  noDataComponent?: JSX.Element;
 }
 
 function Table(props: TableProps) {
-  const { columns, data } = props;
+  const {
+    columns,
+    data,
+    isLoading = false,
+    loaderComponent,
+    noDataComponent,
+  } = props;
 
   const {
     getTableBodyProps,
@@ -127,24 +161,46 @@ function Table(props: TableProps) {
           ))}
         </thead>
         <tbody {...getTableBodyProps()}>
-          {rows.map((row, index) => {
-            prepareRow(row);
-            return (
-              <tr {...row.getRowProps()} key={index}>
-                {row.cells.map((cell, index) => {
-                  return (
-                    <td
-                      {...cell.getCellProps()}
-                      data-colindex={index}
-                      key={index}
-                    >
-                      {cell.render("Cell")}
-                    </td>
-                  );
-                })}
-              </tr>
-            );
-          })}
+          {isLoading ? (
+            <tr>
+              <td className="no-border" colSpan={columns?.length}>
+                <CentralizedWrapper>
+                  {loaderComponent ? (
+                    loaderComponent
+                  ) : (
+                    <Spinner size={IconSize.XXL} />
+                  )}
+                </CentralizedWrapper>
+              </td>
+            </tr>
+          ) : rows.length > 0 ? (
+            rows.map((row, index) => {
+              prepareRow(row);
+              return (
+                <tr {...row.getRowProps()} key={index}>
+                  {row.cells.map((cell, index) => {
+                    return (
+                      <td
+                        {...cell.getCellProps()}
+                        data-colindex={index}
+                        key={index}
+                      >
+                        {cell.render("Cell")}
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            })
+          ) : (
+            <tr>
+              <td className="no-border" colSpan={columns?.length}>
+                <CentralizedWrapper>
+                  {noDataComponent ? noDataComponent : <EmptyDataState />}
+                </CentralizedWrapper>
+              </td>
+            </tr>
+          )}
         </tbody>
       </table>
     </Styles>