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

Move TableHeader to its own component

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-08-08 09:38:35 +03:00
parent bd965c93f4
commit 3df4c306e5
3 changed files with 45 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/renderer/components/table/react-table.tsx
View File

@ -3,10 +3,10 @@
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import styles from "./react-table.module.scss";
import React from "react";
import { flexRender } from '@tanstack/react-table'
import type { Table } from "@tanstack/react-table";
import { TableHeader } from "./table-header";
interface TableProps<T> {
table: Table<T>;
@ -17,35 +17,7 @@ export function Table<Data>({ className, table }: TableProps<Data>) {
return (
<div className={className}>
<table>
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th key={header.id}>
{header.isPlaceholder ? null : (
<div
{...{
className: header.column.getCanSort()
? styles.sortableColumn
: '',
onClick: header.column.getToggleSortingHandler(),
}}
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{{
asc: ' 🔼',
desc: ' 🔽',
}[header.column.getIsSorted() as string] ?? null}
</div>
)}
</th>
))}
</tr>
))}
</thead>
<TableHeader table={table}/>
<tbody>
{table.getRowModel().rows.map(row => (
<tr key={row.id}>

3
src/renderer/components/table/react-table.module.scss → src/renderer/components/table/table-header.module.scss
View File

@ -1,5 +1,4 @@
.sortableColumn {
cursor: pointer;
user-select: none;
}
}

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

@ -0,0 +1,42 @@
import styles from "./table-header.module.scss";
import React from "react";
import type { Table } from "@tanstack/react-table";
import { flexRender } from '@tanstack/react-table';
interface TableHeaderProps<Data> {
table: Table<Data>;
}
export function TableHeader<Data>({ table }: TableHeaderProps<Data>) {
return (
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th key={header.id}>
{header.isPlaceholder ? null : (
<div
{...{
className: header.column.getCanSort()
? styles.sortableColumn
: '',
onClick: header.column.getToggleSortingHandler(),
}}
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{{
asc: ' 🔼',
desc: ' 🔽',
}[header.column.getIsSorted() as string] ?? null}
</div>
)}
</th>
))}
</tr>
))}
</thead>
)
}