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

Initial sketch of new react table component

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-08-04 10:52:21 +03:00
parent 0eeb5fe300
commit c3c81529f6
3 changed files with 109 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/renderer/components/list/table-theme.module.scss Normal file
View File

@ -0,0 +1,45 @@
.tableTheme {
table {
border-spacing: 0;
border-top: thin solid var(--hrColor);
}
thead {
border-bottom: thin solid var(--hrColor);
color: var(--textColorAccent);
padding-top: 7px;
height: 33px;
}
thead tr {
margin: 0 var(--margin);
}
tr {
margin: calc(var(--margin) * 1.6) var(--margin);
}
th {
white-space: nowrap;
text-align: left;
padding: 0 var(--padding);
font-weight: 500;
}
.headIcon {
font-weight: normal;
color: var(--textColorAccent);
}
.disabledArrow {
opacity: 0.3;
}
td {
padding: 0 var(--padding);
}
.actions {
@apply justify-end;
}
}

45
src/renderer/components/table/react-table.module.scss
View File

@ -1,44 +1,5 @@
.table {
border-spacing: 0;
border-top: thin solid var(--hrColor);
}
.thead {
@apply overflow-hidden font-bold;
border-bottom: thin solid var(--hrColor);
color: var(--textColorAccent);
padding-top: 7px;
height: 33px;
}
.thead .tr {
margin: 0 var(--margin);
}
.tr {
@apply flex;
margin: calc(var(--margin) * 1.6) var(--margin);
}
.th {
@apply relative whitespace-nowrap;
padding: 0 var(--padding);
}
.headIcon {
font-weight: normal;
color: var(--textColorAccent);
}
.disabledArrow {
opacity: 0.3;
}
.td {
@apply flex items-center;
padding: 0 var(--padding);
}
.actions {
@apply justify-end;
.sortableColumn {
cursor: pointer;
user-select: none;
}

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

@ -4,103 +4,76 @@
*/
import styles from "./react-table.module.scss";
import React, { useCallback, useMemo } from "react";
import type { Row, UseTableOptions } from "react-table";
import { useFlexLayout, useSortBy, useTable } from "react-table";
import { Icon } from "../icon";
import { cssNames } from "../../utils";
import React from "react";
import {
flexRender,
useReactTable,
getSortedRowModel,
} from '@tanstack/react-table'
import type { TableOptions, Table, SortingState } from "@tanstack/react-table";
export interface ReactTableProps<Data extends object> extends UseTableOptions<Data> {
headless?: boolean;
interface TableProps<T> extends TableOptions<T> {
className?: string;
}
export function ReactTable<Data extends object>({ columns, data, headless }: ReactTableProps<Data>) {
const defaultColumn = useMemo(
() => ({
minWidth: 20,
width: 100,
}),
[],
);
export function Table<Data>({ columns, data, getCoreRowModel, className }: TableProps<Data>) {
const [sorting, setSorting] = React.useState<SortingState>([])
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable(
{
columns,
data,
defaultColumn,
const table = useReactTable({
data,
columns,
getCoreRowModel,
state: {
sorting,
},
useFlexLayout,
useSortBy,
);
const renderRow = useCallback(
(row: Row<Data>) => {
prepareRow(row);
return (
<div className={styles.tr} key={row.id}>
{row.cells.map((cell, index) => (
<div
{...cell.getCellProps()}
key={cell.getCellProps().key}
className={cssNames(styles.td, columns[index].accessor)}
>
{cell.render("Cell")}
</div>
))}
</div>
);
},
[columns, prepareRow],
);
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
});
return (
<div {...getTableProps()} className={styles.table}>
{!headless && (
<div className={styles.thead}>
{headerGroups.map(headerGroup => (
<div
{...headerGroup.getHeaderGroupProps()}
key={headerGroup.getHeaderGroupProps().key}
className={styles.tr}
>
{headerGroup.headers.map(column => (
<div
{...column.getHeaderProps(column.getSortByToggleProps())}
key={column.getHeaderProps().key}
className={styles.th}
>
{column.render("Header")}
{/* Sort direction indicator */}
<span>
{column.isSorted
? column.isSortedDesc
? <Icon material="arrow_drop_down" small/>
: <Icon material="arrow_drop_up" small/>
: !column.disableSortBy && (
<Icon
material="arrow_drop_down"
small
className={styles.disabledArrow}
/>
<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()
)}
</span>
</div>
{{
asc: ' 🔼',
desc: ' 🔽',
}[header.column.getIsSorted() as string] ?? null}
</div>
)}
</th>
))}
</div>
</tr>
))}
</div>
)}
<div {...getTableBodyProps()}>
{rows.map(renderRow)}
</div>
</thead>
<tbody>
{table.getRowModel().rows.map(row => (
<tr key={row.id}>
{row.getVisibleCells().map(cell => (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
)
}