Skip to content

Commit f0b97f1

Browse files
fix: #11213, #11215
1 parent a86d4ec commit f0b97f1

File tree

3 files changed

+10
-18
lines changed

3 files changed

+10
-18
lines changed

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@ export function DataTableToolbar<TData>({
3636
const isFiltered = table.getState().columnFilters.length > 0;
3737

3838
return (
39-
<div className="flex items-center justify-end space-x-2">
39+
<div className="bg-darkgray-50 sticky top-[3rem] z-10 flex items-center justify-end space-x-2 py-4 md:top-0">
4040
{searchKey && (
4141
<Input
42-
className="max-w-64 mb-0 mr-auto"
42+
className="max-w-64 mb-0 mr-auto rounded-md"
4343
placeholder="Search"
4444
value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ""}
4545
onChange={(event) => table.getColumn(searchKey)?.setFilterValue(event.target.value)}

packages/ui/components/data-table/index.tsx

+2-14
Original file line numberDiff line numberDiff line change
@@ -102,21 +102,9 @@ export function DataTable<TData, TValue>({
102102
searchKey={searchKey}
103103
tableCTA={tableCTA}
104104
/>
105-
<div
106-
className="border-subtle rounded-md border"
107-
ref={tableContainerRef}
108-
onScroll={onScroll}
109-
style={{
110-
height: "calc(100vh - 30vh)",
111-
overflow: "auto",
112-
}}>
105+
<div className="border-subtle border" ref={tableContainerRef} onScroll={onScroll}>
113106
<Table>
114-
<TableHeader
115-
style={{
116-
position: "sticky",
117-
top: 0,
118-
zIndex: 1,
119-
}}>
107+
<TableHeader>
120108
{table.getHeaderGroups().map((headerGroup) => (
121109
<TableRow key={headerGroup.id}>
122110
{headerGroup.headers.map((header) => {

packages/ui/components/table/TableNew.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { classNames } from "@calcom/lib";
44

55
const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
66
({ className, ...props }, ref) => (
7-
<div className="w-full overflow-auto">
7+
<div className="w-full overflow-auto md:overflow-visible">
88
<table ref={ref} className={classNames("w-full caption-bottom text-sm", className)} {...props} />
99
</div>
1010
)
@@ -13,7 +13,11 @@ Table.displayName = "Table";
1313

1414
const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
1515
({ className, ...props }, ref) => (
16-
<thead ref={ref} className={classNames("[&_tr]:bg-subtle [&_tr]:border-b", className)} {...props} />
16+
<thead
17+
ref={ref}
18+
className={classNames("[&_tr]:bg-subtle md:sticky md:top-[4.25rem] md:z-10 [&_tr]:border-b", className)}
19+
{...props}
20+
/>
1721
)
1822
);
1923
TableHeader.displayName = "TableHeader";

0 commit comments

Comments
 (0)