feat: make tables resizeable #823
Conversation
| outline: none; | ||
| background: transparent; | ||
| } | ||
|
|
||
| &__input:focus, | ||
| &__input:focus-visible { | ||
| border: 1px solid var(--g-color-line-generic-hover); | ||
| } |
There was a problem hiding this comment.
These changes fix light outline, which doesn't correspond to dark mode and makes control height more, than others
Before:
After:
artemmufazalov
force-pushed
the
tables-resize
branch
from
faaebf6 to
3cb0b42
Compare
| import i18n from './i18n'; | ||
| import {b} from './shared'; | ||
|
|
||
| export const CLUSTERS_COLUMNS_WIDTH_LS_KEY = 'clustersTableColumnsWidth'; |
There was a problem hiding this comment.
Made every columns width localStorage key a constant for possible use of the same key for the same set of columns in case these columns are used in different tables
artemmufazalov
force-pushed
the
tables-resize
branch
from
3cb0b42 to
620581e
Compare
| onResize?: (width: number) => void; | ||
| } | ||
|
|
||
| export function ResizeHandler({ |
There was a problem hiding this comment.
There and in other virtual table diffs some parts are copied from react-data-table with some changes, since tables are different
artemmufazalov
force-pushed
the
tables-resize
branch
from
620581e to
1e8acad
Compare
|
What do you think about making a bigger minWidth for columns, which contain tablets? For now I may shrink this columns for some reason, but it will be quite a tricky to enlarge it to previous size. |
|
Is it possible to add action for double click on resize panel? It will be handy if double click restores initial column width. |
|
Why didn't you make resizable columns with Vdisks and Pdisks in Storage page? |
| import type {DataTableProps, Settings} from '@gravity-ui/react-data-table'; | ||
| import DataTable, {updateColumnsWidth} from '@gravity-ui/react-data-table'; | ||
|
|
||
| import {cn} from '../..//utils/cn'; |
It's possible, but it requires changes to I made an issue for this: #824 |
They have their own styles with
We need some rework, if we want to change it. For now I decided to left it as it was. Also It's the last column, so its width isn't a big issue since it doesn't affect other columns and always have the width of the content |
| import React from 'react'; | ||
|
|
||
| import {useTypedSelector} from '../../lib'; | ||
| import {useTypedSelector} from '../../utils/hooks'; |
There was a problem hiding this comment.
Updated such imports as well to prevent circular deps when embedded-ui is used as package
Test stand: https://nda.ya.ru/t/xCSdBmdn75ueXj
All tables are resizeable. Resize values are stored to localStorage. Exception - tables without predefined set of columns (query result, preview, hotkeys), their resize values are stored only while component is mounted
Closes #807