From 5961df00b80e2dc61ba7f7d7e0356253548ad73d Mon Sep 17 00:00:00 2001
From: "Ping R." <witcha.rath@gmail.com>
Date: Fri, 27 Dec 2024 14:44:19 +0700
Subject: [PATCH] update empty state style

---
 src/components/app/data-table.tsx | 32 +++++++++++++++++++++----------
 src/main.css                      |  1 +
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/app/data-table.tsx b/src/components/app/data-table.tsx
index d7fe9c5..8046044 100644
--- a/src/components/app/data-table.tsx
+++ b/src/components/app/data-table.tsx
@@ -265,7 +265,10 @@ export const DataTable: FC<DataTableProps> = ({ data }) => {
           <PanelResizeHandle className="resize-handle"></PanelResizeHandle>
         </Show>
         <Panel id="panel-stock" minSize={30} order={2}>
-          <div className="table-area" ref={parentRef}>
+          <div
+            className="table-area"
+            ref={parentRef}
+            style={{ overflow: table.getRowModel().rows.length === 0 ? 'hidden' : 'auto' }}>
             <table className="table">
               <thead>
                 {table.getHeaderGroups().map((headerGroup) => (
@@ -296,19 +299,28 @@ export const DataTable: FC<DataTableProps> = ({ data }) => {
                   </ViewportList>
                 </tbody>
               </Show>
+              <Show when={table.getRowModel().rows.length === 0}>
+                <tbody>
+                  <tr>
+                    <td colSpan={table.getVisibleFlatColumns().length}>
+                      <EmptyState
+                        width="100vw"
+                        position="sticky"
+                        left={0}
+                        right={0}
+                        marginTop={10}
+                        icon={<AiOutlineStock />}
+                        title="No results found"
+                        description="Try adjusting filters"
+                      />
+                    </td>
+                  </tr>
+                </tbody>
+              </Show>
             </table>
           </div>
         </Panel>
       </PanelGroup>
-      <Show when={table.getRowModel().rows.length === 0}>
-        <EmptyState
-          width="100%"
-          marginTop={10}
-          icon={<AiOutlineStock />}
-          title="No results found"
-          description="Try adjusting filters"
-        />
-      </Show>
     </>
   );
 };
diff --git a/src/main.css b/src/main.css
index 37dc77f..17fd7ed 100644
--- a/src/main.css
+++ b/src/main.css
@@ -40,6 +40,7 @@ body {
 
 .table-area {
   max-width: 100%;
+  min-height: var(--content-max-height);
   max-height: var(--content-max-height);
   overflow: auto;
   white-space: nowrap;