commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

fix: use columnPinning API (#18830)

Browse Source 
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
This commit is contained in:
Eunjae Lee
2025-01-23 18:25:42 +00:00
committed by GitHub
co-authored by sean-brydon
parent e748d3e252
commit b304467f15
8 changed files with 36 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/features/data-table/components/DataTable.tsx
+11 -11
View File
@@ -119,21 +119,21 @@ export function DataTable<TData, TValue>({
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className="hover:bg-subtle flex w-full">
{headerGroup.headers.map((header) => {
const meta = header.column.columnDef.meta;
const { column } = header;
const meta = column.columnDef.meta;
return (
<TableHead
key={header.id}
style={{
...(meta?.sticky?.position === "left" && { left: `${meta.sticky.gap || 0}px` }),
...(meta?.sticky?.position === "right" && { right: `${meta.sticky.gap || 0}px` }),
...(column.getIsPinned() === "left" && { left: `${column.getStart("left")}px` }),
...(column.getIsPinned() === "right" && { right: `${column.getAfter("right")}px` }),
width: `var(--header-${kebabCase(header?.id)}-size)`,
}}
className={classNames(
"relative flex shrink-0 items-center",
header.column.getCanSort()
? "bg-subtle hover:bg-muted cursor-pointer select-none"
: "",
meta?.sticky && "top-0 z-20 sm:sticky"
"bg-subtle",
header.column.getCanSort() ? "hover:bg-muted cursor-pointer select-none" : "",
column.getIsPinned() && "top-0 z-20 sm:sticky"
)}>
<div
className="flex h-full w-full items-center overflow-hidden"
@@ -254,20 +254,20 @@ function DataTableBody<TData>({
}}
className={classNames(onRowMouseclick && "hover:cursor-pointer", "group")}>
{row.getVisibleCells().map((cell) => {
const column = table.getColumn(cell.column.id);
const column = cell.column;
const meta = column?.columnDef.meta;
return (
<TableCell
key={cell.id}
style={{
...(meta?.sticky?.position === "left" && { left: `${meta.sticky.gap || 0}px` }),
...(meta?.sticky?.position === "right" && { right: `${meta.sticky.gap || 0}px` }),
...(column.getIsPinned() === "left" && { left: `${column.getStart("left")}px` }),
...(column.getIsPinned() === "right" && { right: `${column.getAfter("right")}px` }),
width: `var(--col-${kebabCase(cell.column.id)}-size)`,
}}
className={classNames(
"flex shrink-0 items-center overflow-hidden",
variant === "compact" && "p-0",
meta?.sticky &&
column.getIsPinned() &&
"bg-default group-hover:!bg-muted group-data-[state=selected]:bg-subtle sm:sticky"
)}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
packages/features/ee/teams/components/MemberList.tsx
+3 -3
View File
@@ -407,9 +407,6 @@ function MemberListContent(props: Props) {
id: "actions",
size: 90,
enableResizing: false,
meta: {
sticky: { position: "right" },
},
cell: ({ row }) => {
const user = row.original;
const isSelf = user.id === session?.user.id;
@@ -634,6 +631,9 @@ function MemberListContent(props: Props) {
manualPagination: true,
initialState: {
columnVisibility: initalColumnVisibility,
columnPinning: {
right: ["actions"],
},
},
state: {
columnFilters,
packages/features/package.json
+1 -1
View File
@@ -12,7 +12,7 @@
"@calcom/trpc": "*",
"@calcom/ui": "*",
"@lexical/react": "^0.9.0",
"@tanstack/react-table": "^8.9.3",
"@tanstack/react-table": "^8.20.6",
"@tanstack/react-virtual": "^3.10.9",
"@vercel/functions": "^1.4.0",
"framer-motion": "^10.12.8",
packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx
+3 -8
View File
@@ -104,11 +104,6 @@ function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps)
enableSorting: false,
enableResizing: false,
size: 30,
meta: {
sticky: {
position: "left",
},
},
header: ({ table }) => (
<Checkbox
checked={table.getIsAllPageRowsSelected()}
@@ -134,9 +129,6 @@ function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps)
header: () => {
return `Managed Users`;
},
meta: {
sticky: { position: "left", gap: 24 },
},
cell: ({ row }) => {
if (isPending) {
return <SkeletonText className="h-6 w-1/4" />;
@@ -259,6 +251,9 @@ function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps)
manualPagination: true,
initialState: {
columnVisibility: initalColumnVisibility,
columnPinning: {
left: ["select", "member"],
},
},
defaultColumn: {
size: 150,
packages/features/users/components/UserTable/UserListTable.tsx
+4 -11
View File
@@ -265,11 +265,6 @@ function UserListTableContent() {
enableSorting: false,
enableResizing: false,
size: 30,
meta: {
sticky: {
position: "left",
},
},
header: ({ table }) => (
<Checkbox
checked={table.getIsAllPageRowsSelected()}
@@ -296,9 +291,6 @@ function UserListTableContent() {
header: () => {
return `Members`;
},
meta: {
sticky: { position: "left", gap: 24 },
},
cell: ({ row }) => {
const { username, email, avatarUrl } = row.original;
return (
@@ -411,9 +403,6 @@ function UserListTableContent() {
enableSorting: false,
enableResizing: false,
size: 80,
meta: {
sticky: { position: "right" },
},
cell: ({ row }) => {
const user = row.original;
const permissionsRaw = permissions;
@@ -452,6 +441,10 @@ function UserListTableContent() {
manualPagination: true,
initialState: {
columnVisibility: initalColumnVisibility,
columnPinning: {
left: ["select", "member"],
right: ["actions"],
},
},
defaultColumn: {
size: 150,
packages/types/tanstack-table.d.ts
Vendored
-4
View File
@@ -4,10 +4,6 @@ import type { ColumnFilterMeta } from "@calcom/features/data-table";
declare module "@tanstack/table-core" {
interface ColumnMeta<TData extends RowData, TValue> {
sticky?: {
position: "left" | "right";
gap?: number;
};
filter?: ColumnFilterMeta;
// `autoWidth` can make the column size dynamic,
packages/ui/package.json
+1 -1
View File
@@ -78,7 +78,7 @@
"@storybook/blocks": "^7.6.3",
"@storybook/react": "^7.6.3",
"@tanstack/react-query": "^5.17.15",
"@tanstack/react-table": "^8.9.3",
"@tanstack/react-table": "^8.20.6",
"@wojtekmaj/react-daterange-picker": "^3.3.1",
"class-variance-authority": "^0.4.0",
"cmdk": "^0.2.0",
yarn.lock
+13 -13
View File
@@ -4151,7 +4151,7 @@ __metadata:
"@calcom/trpc": "*"
"@calcom/ui": "*"
"@lexical/react": ^0.9.0
"@tanstack/react-table": ^8.9.3
"@tanstack/react-table": ^8.20.6
"@tanstack/react-virtual": ^3.10.9
"@testing-library/react-hooks": ^8.0.1
"@types/web-push": ^3.6.3
@@ -4956,7 +4956,7 @@ __metadata:
"@storybook/blocks": ^7.6.3
"@storybook/react": ^7.6.3
"@tanstack/react-query": ^5.17.15
"@tanstack/react-table": ^8.9.3
"@tanstack/react-table": ^8.20.6
"@types/react": 18.0.26
"@types/react-dom": ^18.0.9
"@wojtekmaj/react-daterange-picker": ^3.3.1
@@ -15306,15 +15306,15 @@ __metadata:
languageName: node
linkType: hard
"@tanstack/react-table@npm:^8.9.3":
version: 8.9.3
resolution: "@tanstack/react-table@npm:8.9.3"
"@tanstack/react-table@npm:^8.20.6":
version: 8.20.6
resolution: "@tanstack/react-table@npm:8.20.6"
dependencies:
"@tanstack/table-core": 8.9.3
"@tanstack/table-core": 8.20.5
peerDependencies:
react: ">=16"
react-dom: ">=16"
checksum: a71fbbc608bb11b79ecd2b1a838fad2fc4140f9eb1a25bd44b6b1b4c6acd52741b5745e3e022390c642c284d0d528249360e322c0dbc3d34fea031611c207a7d
react: ">=16.8"
react-dom: ">=16.8"
checksum: 709f7216cf31af65abe10121e92233c0d9f04b9167769a0997052200cdbc35af525cbf1879d456f27c6df70399a14d006d117b06c5db665d9c486038efc2f4b1
languageName: node
linkType: hard
@@ -15330,10 +15330,10 @@ __metadata:
languageName: node
linkType: hard
"@tanstack/table-core@npm:8.9.3":
version: 8.9.3
resolution: "@tanstack/table-core@npm:8.9.3"
checksum: 52c7e57daaa3160450fb0bde702ec0b8aab159e2b19efd1012e03b3e167acc52839f5b39578cc8bf96e91346719f400d0435a5191384c168d9477da82f276c38
"@tanstack/table-core@npm:8.20.5":
version: 8.20.5
resolution: "@tanstack/table-core@npm:8.20.5"
checksum: f8b175f11eb9ee1e029bb5e91c1038527714382de4bd14750377f43c25e69b687b21bfb181ee07131637d3432618964a4b7a898608fc8411ca50da1e7e8ed4c5
languageName: node
linkType: hard