Skip to content

Commit 9d959d1

Browse files
RaubzeugRaubzeug
committed
feat: add wrapper for gravity-ui/table
1 parent dacc546 commit 9d959d1

File tree

10 files changed

+159
-194
lines changed

10 files changed

+159
-194
lines changed

‎package-lock.json

+23-21
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
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

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

‎src/components/Table/Table.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
}
13+
14+
interface ColumnHeaderProps {
15+
children: React.ReactNode;
16+
className?: string;
17+
}
18+
19+
export function ColumnHeader({children, className}: ColumnHeaderProps) {
20+
return <div className={block('table-header-content', className)}>{children}</div>;
21+
}
22+
23+
export function Table<TData>({className, width, ...props}: TableProps<TData>) {
24+
return (
25+
<div className={block()}>
26+
<BaseTable
27+
headerCellClassName={({column}) => {
28+
const align = column.columnDef.meta?.align;
29+
return block('table-header-cell', {align});
30+
}}
31+
cellClassName={(cell) => {
32+
const align = cell?.column.columnDef.meta?.align;
33+
const verticalAlign = cell?.column.columnDef.meta?.verticalAlign;
34+
return block('table-cell', {align, 'vertical-align': verticalAlign});
35+
}}
36+
className={block('table', {width}, className)}
37+
{...props}
38+
/>
39+
</div>
40+
);
41+
}

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

-51
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

+3-16
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';
@@ -31,21 +31,8 @@ export function TabletStorageInfo({data}: TabletStorageInfoProps) {
3131
},
3232
});
3333
return (
34-
//block wrapper for table
3534
<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-
/>
35+
<Table table={table} />
4936
</div>
5037
);
5138
}

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

+8-17
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

+1-1
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)