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

Make separate VirtualTableHeader

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-08-23 16:10:33 +03:00
parent 9247f932dc
commit 0629ff3123
5 changed files with 28 additions and 7 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

@ -11,12 +11,12 @@
border-bottom: thin solid var(--hrColor); border-bottom: thin solid var(--hrColor);
color: var(--textColorAccent); color: var(--textColorAccent);
height: 33px; height: 33px;
position: sticky; // position: sticky;
top: 0; top: 0;
} }
thead tr { thead tr {
margin: 0 var(--margin); // margin: 0 var(--margin);
} }
tr { tr {

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

@ -4,13 +4,14 @@ import type { Table } from "@tanstack/react-table";
import { flexRender } from '@tanstack/react-table'; import { flexRender } from '@tanstack/react-table';
import { cssNames } from "../../utils"; import { cssNames } from "../../utils";
interface TableHeaderProps<Data> { export interface TableHeaderProps<Data> {
table: Table<Data>; table: Table<Data>;
className?: string;
} }
export function TableHeader<Data>({ table }: TableHeaderProps<Data>) { export function TableHeader<Data>({ table, className }: TableHeaderProps<Data>) {
return ( return (
<thead> <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 => (

11
src/renderer/components/table/virtual-table-header.module.scss Normal file
View File

@ -0,0 +1,11 @@
.header {
display: block;
tr {
display: flex;
}
th {
flex: 1 0;
}
}

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

@ -0,0 +1,9 @@
import styles from "./virtual-table-header.module.scss";
import React from "react";
import { TableHeader, TableHeaderProps } from "./table-header";
export function VirtualTableHeader<Data>(props: TableHeaderProps<Data>) {
return (
<TableHeader {...props} className={styles.header}/>
)
}

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

@ -6,8 +6,8 @@
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 } from "@tanstack/react-table";
import { TableHeader } from "./table-header";
import { useVirtualizer } from "@tanstack/react-virtual"; import { useVirtualizer } from "@tanstack/react-virtual";
import { VirtualTableHeader } from "./virtual-table-header";
interface TableProps<T> { interface TableProps<T> {
table: Table<T>; table: Table<T>;
@ -34,7 +34,7 @@
width: '100%', width: '100%',
position: 'relative', position: 'relative',
}}> }}>
<TableHeader table={table}/> <VirtualTableHeader table={table}/>
<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>