fix(Table): add loading indicator and empty message

adarshpastakia · Oct 14, 2024 · e353b99 · e353b99
1 parent e00c693
commit e353b99
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 74 deletions.
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
@@ -27,6 +27,7 @@ export {
   AnimationIndicator,
   AnimationSpinner,
   Skeleton,
+  Loading,
 } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";
 export { AvatarGroup } from "./avatar/AvatarGroup";

diff --git a/packages/data/src/table/Table.tsx b/packages/data/src/table/Table.tsx
@@ -21,9 +21,10 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useDebounce } from "@react-fabric/core";
+import { EmptyContent, Loading, useDebounce } from "@react-fabric/core";
 import classNames from "classnames";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { AddColumn } from "./AddColumn";
 import { BodyCell } from "./BodyCell";
 import { CheckboxCell } from "./CheckboxCell";
@@ -41,10 +42,12 @@ export const Table = <T extends KeyValue = KeyValue>({
   checkableRows,
   hideableColumns,
   sort,
+  loading,
   onSort,
   onRowClick,
   onCheckedChanged,
 }: TableProps<T>) => {
+  const { t } = useTranslation("data");
   const fireCheckChanged = useDebounce(
     (checkedIds: Array<keyof T>) => onCheckedChanged?.(checkedIds),
     [],
@@ -76,7 +79,7 @@ export const Table = <T extends KeyValue = KeyValue>({
       <div
         className="grid area-content overflow-auto relative"
         style={{
-          gridTemplate: `"head" auto "content" 1fr "foot" auto/1fr`,
+          gridTemplate: `"head" auto "loader" auto "content" 1fr "foot" auto/1fr`,
         }}
         ref={scrollerRef}
       >
@@ -108,88 +111,92 @@ export const Table = <T extends KeyValue = KeyValue>({
             )}
           </div>
         </div>
-        <div
-          className="area-content flex flex-col flex-nowrap"
-          style={{ height: totalSize() }}
-        >
-          <div style={{ height: items[0]?.start }} />
-          {items.map(({ index, key }) => {
-            const data = getData(index);
-            return (
-              <div
-                key={key}
-                role="none"
-                className={classNames(
-                  "flex flex-nowrap",
-                  index % 2 ? "bg-even" : "bg-odd",
-                  onRowClick && "hover:bg-primary-50 active:bg-primary-100",
-                )}
-                onClick={() =>
-                  checkableRows && !onRowClick
-                    ? toggleChecked(data[keyProperty])
-                    : onRowClick?.(data)
-                }
-                data-index={index}
-                ref={measureElement}
-              >
-                <div className={wrapperStart}>
-                  {checkableRows && (
-                    <CheckboxCell
-                      onClick={() => toggleChecked(data[keyProperty])}
-                      state={
-                        checkState.checked.includes(data[keyProperty]) ? 1 : 0
-                      }
-                    />
+        {loading && <Loading />}
+        {data.length > 0 && (
+          <div
+            className="area-content flex flex-col flex-nowrap"
+            style={{ height: totalSize() }}
+          >
+            <div style={{ height: items[0]?.start }} />
+            {items.map(({ index, key }) => {
+              const data = getData(index);
+              return (
+                <div
+                  key={key}
+                  role="none"
+                  className={classNames(
+                    "flex flex-nowrap",
+                    index % 2 ? "bg-even" : "bg-odd",
+                    onRowClick && "hover:bg-primary-50 active:bg-primary-100",
                   )}
-                  {state.start?.map((col, ids) => (
-                    <BodyCell key={`${key}:${ids}`} column={col} item={data} />
+                  onClick={() =>
+                    checkableRows && !onRowClick
+                      ? toggleChecked(data[keyProperty])
+                      : onRowClick?.(data)
+                  }
+                  data-index={index}
+                  ref={measureElement}
+                >
+                  <div className={wrapperStart}>
+                    {checkableRows && (
+                      <CheckboxCell
+                        onClick={() => toggleChecked(data[keyProperty])}
+                        state={
+                          checkState.checked.includes(data[keyProperty]) ? 1 : 0
+                        }
+                      />
+                    )}
+                    {state.start?.map((col, ids) => (
+                      <BodyCell
+                        key={`${key}:${ids}`}
+                        column={col}
+                        item={data}
+                      />
+                    ))}
+                  </div>
+                  {state.cols?.map((col, idc) => (
+                    <BodyCell key={`${key}:${idc}`} column={col} item={data} />
                   ))}
+                  <div className={wrapperEnd}>
+                    {state.end?.map((col, ide) => (
+                      <BodyCell
+                        key={`${key}:${ide}`}
+                        column={col}
+                        item={data}
+                      />
+                    ))}
+                    {hideableColumns && <div className="w-6" />}
+                  </div>
                 </div>
-                {state.cols?.map((col, idc) => (
-                  <BodyCell key={`${key}:${idc}`} column={col} item={data} />
+              );
+            })}
+            <div className="flex-1 flex flex-nowrap">
+              <div className={wrapperStart}>
+                {checkableRows && <div className="w-6" />}
+                {state.start?.map((col) => (
+                  <EmptyCell key={String(col.id)} {...col} />
                 ))}
-                <div className={wrapperEnd}>
-                  {state.end?.map((col, ide) => (
-                    <BodyCell key={`${key}:${ide}`} column={col} item={data} />
-                  ))}
-                  {hideableColumns && <div className="w-6" />}
-                </div>
               </div>
-            );
-          })}
-          <div className="flex-1 flex flex-nowrap">
-            <div className={wrapperStart}>
-              {checkableRows && <div className="w-6" />}
-              {state.start?.map((col) => (
-                <EmptyCell key={String(col.id)} {...col} />
-              ))}
-            </div>
-            {state.cols?.map((col) => (
-              <EmptyCell key={String(col.id)} {...col} />
-            ))}
-            <div className={wrapperEnd}>
-              {state.end?.map((col) => (
+              {state.cols?.map((col) => (
                 <EmptyCell key={String(col.id)} {...col} />
               ))}
+              <div className={wrapperEnd}>
+                {state.end?.map((col) => (
+                  <EmptyCell key={String(col.id)} {...col} />
+                ))}
 
-              {hideableColumns && <div className="w-6" />}
-            </div>
-          </div>
-        </div>
-        <div className="area-foot bg-dimmed border-t sticky bottom-0 flex flex-nowrap z-2">
-          <div className={wrapperStart}>
-            {checkableRows && (
-              <div className="group font-medium border-e flex w-6 flex-nowrap text-start items-center">
-                &nbsp;
+                {hideableColumns && <div className="w-6" />}
               </div>
-            )}
-            {state.start?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
-          </div>
-          {state.cols?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
-          <div className={wrapperEnd}>
-            {state.end?.map((col, idx) => <HeaderCell key={idx} {...col} />)}
+            </div>
           </div>
-        </div>
+        )}
+        {!loading && data.length === 0 && (
+          <EmptyContent
+            size="sm"
+            className="bg-dimmed"
+            message={t("datagrid.empty")}
+          />
+        )}
       </div>
     </TableProvider>
   );

diff --git a/packages/data/src/table/types.ts b/packages/data/src/table/types.ts
@@ -77,6 +77,7 @@ export interface TableProps<T = KeyValue> {
   sort?: { id: string; order: "asc" | "desc" };
   onSort?: (sort: { id: string; order: "asc" | "desc" }) => void;
 
+  loading?: boolean;
   hideableColumns?: boolean;
 
   onRowClick?: (data: T) => void;