diff --git a/src/renderer/components/list/table-theme.module.scss b/src/renderer/components/list/table-theme.module.scss index 673b75d46f..b363273be9 100644 --- a/src/renderer/components/list/table-theme.module.scss +++ b/src/renderer/components/list/table-theme.module.scss @@ -12,7 +12,7 @@ color: var(--textColorAccent); height: 33px; // position: sticky; - top: 0; + // top: 0; } thead tr { @@ -26,7 +26,7 @@ th { white-space: nowrap; text-align: left; - padding: 0 var(--padding); + // padding: 0 var(--padding); font-weight: 500; } diff --git a/src/renderer/components/table/table-header.tsx b/src/renderer/components/table/table-header.tsx index 309af91336..4058372ae4 100644 --- a/src/renderer/components/table/table-header.tsx +++ b/src/renderer/components/table/table-header.tsx @@ -1,21 +1,22 @@ import styles from "./table-header.module.scss"; -import React from "react"; -import type { Table } from "@tanstack/react-table"; +import React, { CSSProperties } from "react"; +import type { Table, Header } from "@tanstack/react-table"; import { flexRender } from '@tanstack/react-table'; import { cssNames } from "../../utils"; export interface TableHeaderProps { table: Table; + getColumnSizeStyles: (table: Table, header: Header) => CSSProperties; className?: string; } -export function TableHeader({ table, className }: TableHeaderProps) { +export function TableHeader({ table, className, getColumnSizeStyles }: TableHeaderProps) { return ( {table.getHeaderGroups().map(headerGroup => ( {headerGroup.headers.map(header => ( - + {header.isPlaceholder ? null : (
{ @@ -23,7 +23,7 @@ import { VirtualTableHeader } from "./virtual-table-header"; estimateSize: () => 55, overscan: 5, count: rows.length, - paddingStart: 60 // header width + paddingStart: 50 // header width }) return ( @@ -34,7 +34,7 @@ import { VirtualTableHeader } from "./virtual-table-header"; width: '100%', position: 'relative', }}> - + {rowVirtualizer.getVirtualItems().map(virtualRow => { const row = rows[virtualRow.index] as Row @@ -72,9 +72,9 @@ import { VirtualTableHeader } from "./virtual-table-header"; ) } -function getCellWidthStyles(table: Table, cell: Cell) { +function getCellWidthStyles(table: Table, cell: Cell | Header): React.CSSProperties { const cellResized = cell.column.id in table.getState().columnSizing; - const cellFixed = cell.column.getCanResize(); + const cellFixed = !cell.column.getCanResize(); if (cellResized || cellFixed) { return {