From e7543c10a9b829fbdf19fcc91b60d8202952d3f7 Mon Sep 17 00:00:00 2001
From: Siddharth Movaliya <siddraj1992@gmail.com>
Date: Fri, 6 Oct 2023 01:54:03 +0530
Subject: [PATCH] fix: fixes organization table UI flickers and adds sticky
 search & filter + table header (#11711)

* fix: #11213, #11215

* Update packages/ui/components/data-table/DataTableToolbar.tsx

---------

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
---
 .../components/data-table/DataTableToolbar.tsx   |  4 ++--
 packages/ui/components/data-table/index.tsx      | 16 ++--------------
 packages/ui/components/table/TableNew.tsx        |  8 ++++++--
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/packages/ui/components/data-table/DataTableToolbar.tsx b/packages/ui/components/data-table/DataTableToolbar.tsx
index 9e8250b3ba..df3370bed8 100644
--- a/packages/ui/components/data-table/DataTableToolbar.tsx
+++ b/packages/ui/components/data-table/DataTableToolbar.tsx
@@ -36,10 +36,10 @@ export function DataTableToolbar<TData>({
   const isFiltered = table.getState().columnFilters.length > 0;
 
   return (
-    <div className="flex items-center justify-end space-x-2">
+    <div className="bg-default sticky top-[3rem] z-10 flex items-center justify-end space-x-2 py-4 md:top-0">
       {searchKey && (
         <Input
-          className="max-w-64 mb-0 mr-auto"
+          className="max-w-64 mb-0 mr-auto rounded-md"
           placeholder="Search"
           value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ""}
           onChange={(event) => table.getColumn(searchKey)?.setFilterValue(event.target.value)}
diff --git a/packages/ui/components/data-table/index.tsx b/packages/ui/components/data-table/index.tsx
index 3cf83a7906..5a41ebcf4e 100644
--- a/packages/ui/components/data-table/index.tsx
+++ b/packages/ui/components/data-table/index.tsx
@@ -102,21 +102,9 @@ export function DataTable<TData, TValue>({
         searchKey={searchKey}
         tableCTA={tableCTA}
       />
-      <div
-        className="border-subtle rounded-md border"
-        ref={tableContainerRef}
-        onScroll={onScroll}
-        style={{
-          height: "calc(100vh - 30vh)",
-          overflow: "auto",
-        }}>
+      <div className="border-subtle border" ref={tableContainerRef} onScroll={onScroll}>
         <Table>
-          <TableHeader
-            style={{
-              position: "sticky",
-              top: 0,
-              zIndex: 1,
-            }}>
+          <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
diff --git a/packages/ui/components/table/TableNew.tsx b/packages/ui/components/table/TableNew.tsx
index 0825ff375b..146e2297d5 100644
--- a/packages/ui/components/table/TableNew.tsx
+++ b/packages/ui/components/table/TableNew.tsx
@@ -4,7 +4,7 @@ import { classNames } from "@calcom/lib";
 
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
-    <div className="w-full overflow-auto">
+    <div className="w-full overflow-auto md:overflow-visible">
       <table ref={ref} className={classNames("w-full caption-bottom text-sm", className)} {...props} />
     </div>
   )
@@ -13,7 +13,11 @@ Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
   ({ className, ...props }, ref) => (
-    <thead ref={ref} className={classNames("[&_tr]:bg-subtle [&_tr]:border-b", className)} {...props} />
+    <thead
+      ref={ref}
+      className={classNames("[&_tr]:bg-subtle md:sticky md:top-[4.25rem] md:z-10 [&_tr]:border-b", className)}
+      {...props}
+    />
   )
 );
 TableHeader.displayName = "TableHeader";