FWF-9879:[Feature]Added no records page

forms-flow-components/src/components/CustomComponents/NoDataFound.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const NoDataFound: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <tbody className="no-data-body">
+      <tr>
+        <td colSpan={2} className="no-data-container">
+          <span className="no-data-text">{t("Nothing is found. Please try again.")}</span>
+        </td>
+      </tr>
+    </tbody>
+  );
+};

forms-flow-components/src/components/index.ts

@@ -17,3 +17,4 @@ export * from "./CustomComponents/TableFooter";
 export * from "./CustomComponents/CustomInfo";
 export * from "./CustomComponents/BuildModal";
 export * from "./CustomComponents/ErrorModal";
+export * from "./CustomComponents/NoDataFound";

forms-flow-theme/scss/_table.scss

@@ -20,7 +20,6 @@ $status-radius: 50%;
   border-collapse: separate !important;
   border-spacing: 0 !important;
   border-radius: var(--radius-0150) !important;
-  table-layout: fixed;
 
   th,
   td {
@@ -182,7 +181,25 @@ $status-radius: 50%;
   justify-content: space-between;
   width: 100%;
 }
-.text-ellipsis{
+.text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.no-data-body {
+  .no-data-container {
+    display: flex;
+    padding: var(--spacer-200) !important ;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacer-100);
+    flex: 1 0 0;
+    .no-data-text {
+      color: var(--ff-gray-400);
+      text-align: center;
+      font-size: var(--font-size-xs);
+      font-weight: var(--font-weight-sm);
+      line-height: var(--text-line-height); 
+    }
+  }
+}