hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Sizing virtual table heads

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-08-24 07:12:58 +03:00
parent 0629ff3123
commit 908f8085e1
3 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/renderer/components/list/table-theme.module.scss
View File

@ -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;
}

9
src/renderer/components/table/table-header.tsx
View File

@ -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<Data> {
table: Table<Data>;
getColumnSizeStyles: (table: Table<Data>, header: Header<Data, unknown>) => CSSProperties;
className?: string;
}
export function TableHeader<Data>({ table, className }: TableHeaderProps<Data>) {
export function TableHeader<Data>({ table, className, getColumnSizeStyles }: TableHeaderProps<Data>) {
return (
<thead className={className}>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th key={header.id} style={{ position: 'relative', width: header.getSize() }}>
<th key={header.id} style={{ position: 'relative', ...getColumnSizeStyles(table, header) }}>
{header.isPlaceholder ? null : (
<div
{...{

10
src/renderer/components/table/virtual-table.tsx
View File

@ -5,7 +5,7 @@
import React from "react";
import { flexRender, Row } from "@tanstack/react-table"
import type { Table, Cell } from "@tanstack/react-table";
import type { Table, Cell, Header } from "@tanstack/react-table";
import { useVirtualizer } from "@tanstack/react-virtual";
import { VirtualTableHeader } from "./virtual-table-header";
@ -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',
}}>
<VirtualTableHeader table={table}/>
<VirtualTableHeader table={table} getColumnSizeStyles={getCellWidthStyles}/>
<tbody>
{rowVirtualizer.getVirtualItems().map(virtualRow => {
const row = rows[virtualRow.index] as Row<Data>
@ -72,9 +72,9 @@ import { VirtualTableHeader } from "./virtual-table-header";
)
}
function getCellWidthStyles<T>(table: Table<T>, cell: Cell<T, unknown>) {
function getCellWidthStyles<T>(table: Table<T>, cell: Cell<T, unknown> | Header<T, unknown>): 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 {