Skip to content

Commit 26d00e9

Browse files
RaubzeugRaubzeug
authored
feat: add wrapper for gravity-ui/table (#1736)
1 parent 6d39f9d commit 26d00e9

10 files changed

Lines changed: 157 additions & 202 deletions

File tree

‎package-lock.json‎

Lines changed: 23 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"@gravity-ui/navigation": "^2.16.0",
2323
"@gravity-ui/paranoid": "^2.0.1",
2424
"@gravity-ui/react-data-table": "^2.1.1",
25-
"@gravity-ui/table": "^0.5.0",
25+
"@gravity-ui/table": "^1.7.0",
2626
"@gravity-ui/uikit": "^6.33.0",
2727
"@gravity-ui/websql-autocomplete": "^12.1.2",
2828
"@hookform/resolvers": "^3.9.0",

‎src/components/Table/Table.scss‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
@use '../../styles/mixins.scss';
2+
3+
.ydb-table {
4+
$block: &;
5+
--ydb-table-cell-height: 40px;
6+
&__table-header-content {
7+
display: inline-flex;
8+
align-items: center;
9+
10+
width: 100%;
11+
height: 100%;
12+
padding: var(--g-spacing-1) var(--g-spacing-2);
13+
14+
border-bottom: 1px solid var(--g-color-line-generic);
15+
}
16+
&__table {
17+
table-layout: fixed;
18+
border-spacing: 0px;
19+
border-collapse: collapse;
20+
tr {
21+
&:hover {
22+
background-color: var(--g-color-base-simple-hover) !important;
23+
}
24+
}
25+
tr:nth-of-type(2n + 1) {
26+
background-color: var(--g-color-base-generic-ultralight);
27+
}
28+
}
29+
&__table_width_max {
30+
width: 100%;
31+
}
32+
&__table-header-cell {
33+
height: var(--ydb-table-cell-height) !important;
34+
padding: 0;
35+
36+
text-align: left;
37+
vertical-align: middle;
38+
39+
background-color: var(--g-color-base-background);
40+
@include mixins.text-subheader-2();
41+
&_align_right {
42+
#{$block}__table-header-content {
43+
justify-content: flex-end;
44+
45+
text-align: right;
46+
}
47+
}
48+
}
49+
&__table-cell {
50+
height: var(--ydb-table-cell-height) !important;
51+
padding: 0;
52+
@include mixins.text-body-2();
53+
&_align_right {
54+
text-align: right;
55+
}
56+
&_vertical-align_top {
57+
vertical-align: top;
58+
}
59+
}
60+
}

‎src/components/Table/Table.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import type {BaseTableProps} from '@gravity-ui/table';
2+
import {BaseTable} from '@gravity-ui/table';
3+
4+
import {cn} from '../../utils/cn';
5+
6+
import './Table.scss';
7+
8+
const block = cn('ydb-table');
9+
10+
interface TableProps<TData> extends BaseTableProps<TData> {
11+
width?: 'max' | 'auto';
12+
wrapperClassName?: string;
13+
}
14+
15+
interface ColumnHeaderProps {
16+
children: React.ReactNode;
17+
className?: string;
18+
}
19+
20+
export function ColumnHeader({children, className}: ColumnHeaderProps) {
21+
return <div className={block('table-header-content', className)}>{children}</div>;
22+
}
23+
24+
export function Table<TData>({className, width, wrapperClassName, ...props}: TableProps<TData>) {
25+
return (
26+
<div className={block(null, wrapperClassName)}>
27+
<BaseTable
28+
headerCellClassName={({column}) => {
29+
const align = column.columnDef.meta?.align;
30+
return block('table-header-cell', {align});
31+
}}
32+
cellClassName={(cell) => {
33+
const align = cell?.column.columnDef.meta?.align;
34+
const verticalAlign = cell?.column.columnDef.meta?.verticalAlign;
35+
return block('table-cell', {align, 'vertical-align': verticalAlign});
36+
}}
37+
className={block('table', {width}, className)}
38+
{...props}
39+
/>
40+
</div>
41+
);
42+
}

‎src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.scss‎

Lines changed: 0 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,7 @@
22

33
.ydb-tablet-storage-info {
44
$block: &;
5-
&__table {
6-
table-layout: fixed;
7-
border-spacing: 0px;
8-
border-collapse: collapse;
9-
tr {
10-
&:hover {
11-
background-color: var(--g-color-base-simple-hover-solid) !important;
12-
}
13-
}
14-
tr:nth-of-type(2n + 1) {
15-
background-color: var(--g-color-base-generic-ultralight);
16-
}
17-
:is(#{$block}__table-header-cell) {
18-
height: 40px;
19-
padding: 0;
205

21-
text-align: left;
22-
23-
background-color: var(--g-color-base-background);
24-
@include mixins.text-subheader-2();
25-
}
26-
:is(#{$block}__table-cell) {
27-
height: 40px;
28-
padding: 0;
29-
@include mixins.text-body-2();
30-
}
31-
}
32-
33-
&__table-header-cell {
34-
&_align_right {
35-
#{$block}__table-header-content {
36-
justify-content: flex-end;
37-
38-
text-align: right;
39-
}
40-
}
41-
}
42-
43-
&__table-header-content {
44-
display: flex;
45-
align-items: center;
46-
47-
height: 100%;
48-
padding: var(--g-spacing-1) var(--g-spacing-2);
49-
50-
vertical-align: middle;
51-
52-
border-bottom: 1px solid var(--g-color-line-generic);
53-
}
54-
:is(&__table-cell_align_right) {
55-
text-align: right;
56-
}
576
&__metrics-cell {
587
padding: var(--g-spacing-1) var(--g-spacing-2);
598

‎src/containers/Tablet/components/TabletStorageInfo/TabletStorageInfo.tsx‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
22

3-
import {Table, useTable} from '@gravity-ui/table';
3+
import {useTable} from '@gravity-ui/table';
44
import type {ExpandedState} from '@tanstack/react-table';
55

6+
import {Table} from '../../../../components/Table/Table';
67
import type {TTabletHiveResponse} from '../../../../types/api/tablet';
78

89
import {getColumns} from './columns';
9-
import {b} from './shared';
1010
import {prepareData} from './utils';
1111

1212
import './TabletStorageInfo.scss';
@@ -30,22 +30,5 @@ export function TabletStorageInfo({data}: TabletStorageInfoProps) {
3030
expanded,
3131
},
3232
});
33-
return (
34-
//block wrapper for table
35-
<div>
36-
<Table
37-
table={table}
38-
headerCellClassName={({column}) => {
39-
const align = column.columnDef.meta?.align;
40-
return b('table-header-cell', {align});
41-
}}
42-
cellClassName={(cell) => {
43-
const align = cell?.column.columnDef.meta?.align;
44-
const verticalAlign = cell?.column.columnDef.meta?.verticalAlign;
45-
return b('table-cell', {align, 'vertical-align': verticalAlign});
46-
}}
47-
className={b('table')}
48-
/>
49-
</div>
50-
);
33+
return <Table table={table} />;
5134
}

‎src/containers/Tablet/components/TabletStorageInfo/columns.tsx‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,13 @@
11
import {ArrowToggle, Button, Flex} from '@gravity-ui/uikit';
22
import type {CellContext, ColumnDef, Row} from '@tanstack/react-table';
33

4+
import {ColumnHeader} from '../../../../components/Table/Table';
45
import {formatTimestamp} from '../../../../utils/dataFormatters/dataFormatters';
56

67
import {tabletInfoKeyset} from './i18n';
78
import {b} from './shared';
89
import type {TabletStorageItem} from './types';
910

10-
interface ColumnHeaderProps {
11-
name: string;
12-
className?: string;
13-
}
14-
15-
function ColumnHeader({name, className}: ColumnHeaderProps) {
16-
return <div className={b('table-header-content', className)}>{name}</div>;
17-
}
18-
1911
function metricsCell(
2012
info: CellContext<TabletStorageItem, unknown>,
2113
formatter?: (value: string | number) => string | number,
@@ -57,24 +49,23 @@ export function getColumns(hasExpand?: boolean) {
5749
const columns: ColumnDef<TabletStorageItem>[] = [
5850
{
5951
accessorKey: 'channelIndex',
60-
header: () => <ColumnHeader name={tabletInfoKeyset('label_channel-index')} />,
52+
header: () => <ColumnHeader>{tabletInfoKeyset('label_channel-index')}</ColumnHeader>,
6153
size: 50,
6254
cell: metricsCell,
6355
meta: {align: 'right'},
6456
},
6557
{
6658
accessorKey: 'storagePoolName',
67-
header: () => <ColumnHeader name={tabletInfoKeyset('label_storage-pool')} />,
59+
header: () => <ColumnHeader>{tabletInfoKeyset('label_storage-pool')}</ColumnHeader>,
6860
size: 200,
6961
cell: metricsCell,
7062
},
7163
{
7264
accessorKey: 'GroupID',
7365
header: () => (
74-
<ColumnHeader
75-
name={tabletInfoKeyset('label_group-id')}
76-
className={hasExpand ? b('with-padding') : undefined}
77-
/>
66+
<ColumnHeader className={hasExpand ? b('with-padding') : undefined}>
67+
{tabletInfoKeyset('label_group-id')}
68+
</ColumnHeader>
7869
),
7970
size: 100,
8071
cell: (info) => (
@@ -83,14 +74,14 @@ export function getColumns(hasExpand?: boolean) {
8374
},
8475
{
8576
accessorKey: 'FromGeneration',
86-
header: () => <ColumnHeader name={tabletInfoKeyset('label_generation')} />,
77+
header: () => <ColumnHeader>{tabletInfoKeyset('label_generation')}</ColumnHeader>,
8778
size: 100,
8879
cell: metricsCell,
8980
meta: {align: 'right'},
9081
},
9182
{
9283
accessorKey: 'Timestamp',
93-
header: () => <ColumnHeader name={tabletInfoKeyset('label_timestamp')} />,
84+
header: () => <ColumnHeader>{tabletInfoKeyset('label_timestamp')}</ColumnHeader>,
9485
size: 200,
9586
cell: (info) => metricsCell(info, formatTimestamp),
9687
meta: {align: 'right'},

‎src/containers/Tenant/Query/QueryResult/components/SimplifiedPlan/OperationCell.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export function OperationCell<TData>({row, depth = 0, params}: OperationCellProp
9797
className={block('operation-name')}
9898
>
9999
{dividers}
100-
<Flex gap={1} alignItems="flex-start" className={block('operation-content')}>
100+
<Flex gap={1} alignItems="center" className={block('operation-content')}>
101101
{row.getCanExpand() && (
102102
<Button view="flat" size="xs" onClick={row.getToggleExpandedHandler()}>
103103
<Button.Icon>

0 commit comments

Comments
 (0)