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); color: var(--textColorAccent);
height: 33px; height: 33px;
// position: sticky; // position: sticky;
top: 0; // top: 0;
} }
thead tr { thead tr {
@ -26,7 +26,7 @@
th { th {
white-space: nowrap; white-space: nowrap;
text-align: left; text-align: left;
padding: 0 var(--padding); // padding: 0 var(--padding);
font-weight: 500; 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 styles from "./table-header.module.scss";
import React from "react"; import React, { CSSProperties } from "react";
import type { Table } from "@tanstack/react-table"; import type { Table, Header } from "@tanstack/react-table";
import { flexRender } from '@tanstack/react-table'; import { flexRender } from '@tanstack/react-table';
import { cssNames } from "../../utils"; import { cssNames } from "../../utils";
export interface TableHeaderProps<Data> { export interface TableHeaderProps<Data> {
table: Table<Data>; table: Table<Data>;
getColumnSizeStyles: (table: Table<Data>, header: Header<Data, unknown>) => CSSProperties;
className?: string; className?: string;
} }
export function TableHeader<Data>({ table, className }: TableHeaderProps<Data>) { export function TableHeader<Data>({ table, className, getColumnSizeStyles }: TableHeaderProps<Data>) {
return ( return (
<thead className={className}> <thead className={className}>
{table.getHeaderGroups().map(headerGroup => ( {table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}> <tr key={headerGroup.id}>
{headerGroup.headers.map(header => ( {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 : ( {header.isPlaceholder ? null : (
<div <div
{...{ {...{

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

@ -3,10 +3,10 @@
* Licensed under MIT License. See LICENSE in root directory for more information. * Licensed under MIT License. See LICENSE in root directory for more information.
*/ */
import React from "react"; import React from "react";
import { flexRender, Row } from "@tanstack/react-table" 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 { useVirtualizer } from "@tanstack/react-virtual";
import { VirtualTableHeader } from "./virtual-table-header"; import { VirtualTableHeader } from "./virtual-table-header";
interface TableProps<T> { interface TableProps<T> {
@ -23,7 +23,7 @@ import { VirtualTableHeader } from "./virtual-table-header";
estimateSize: () => 55, estimateSize: () => 55,
overscan: 5, overscan: 5,
count: rows.length, count: rows.length,
paddingStart: 60 // header width paddingStart: 50 // header width
}) })
return ( return (
@ -34,7 +34,7 @@ import { VirtualTableHeader } from "./virtual-table-header";
width: '100%', width: '100%',
position: 'relative', position: 'relative',
}}> }}>
<VirtualTableHeader table={table}/> <VirtualTableHeader table={table} getColumnSizeStyles={getCellWidthStyles}/>
<tbody> <tbody>
{rowVirtualizer.getVirtualItems().map(virtualRow => { {rowVirtualizer.getVirtualItems().map(virtualRow => {
const row = rows[virtualRow.index] as Row<Data> 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 cellResized = cell.column.id in table.getState().columnSizing;
const cellFixed = cell.column.getCanResize(); const cellFixed = !cell.column.getCanResize();
if (cellResized || cellFixed) { if (cellResized || cellFixed) {
return { return {