feat: add columns resize

[artemmufazalov]

No description provided.

[gravity-ui-bot]

Preview is ready.

[artemmufazalov]

Added values

[sareyu]

maybe use same approach as for ColumnSortIcon?
<ResizeHandler {...column} onResize={onResize} />

[artemmufazalov]

I wanted to check whether it's needed and return null separately, so there won't be additional logic inside ResizeHandler itself

[sareyu]

you can add conditional render here. in method you rewrite propnames, write own type instead of using column's type and method are usually used in class components approach, not functional. not a mistake, just a bit awkward

[sareyu]

does this approach will cause rerender whole table for each resize move? this may cause performance problems for big tables, maybe try to apply native resize solution, when resize affects only placeholder in header which affects whole column width?

[artemmufazalov]

I didn't figured out how to resize only a single column in current realisation. It seems, everywhere it renders like columns.map(renderFunction), so I cannot just update one column. And also width should be updated in many places at once (column, colgroup, rows, cells).

As for the native resize, it assumes defined resize icon, which I cannot change. Also native resize requires some css and html refactoring. And it will also cause whole table rerender, since we need to update not only column, but also colgroup and cells (for proper content wrap). I applied solution, similar to default resize handler, that we have in internal common-datagrid, it looks much better

[ma-efremoff]

Do we realy need to checkstyle?

[ma-efremoff]

Do we realy need to checkstyle? It should work fine:

style = {...style, width: column.width, maxWidth: column.width};

[artemmufazalov]

Didn't know js correctly spreads undefined)

[ma-efremoff]

Is there reasons to not use the condition to check if need to apply width/maxWidth to style of td/th?
I.e. why do we check only column.resizeable in line 135/266?

[artemmufazalov]

I set correct resizeable property in getColumn method (it also applies default value): https://github.com/gravity-ui/react-data-table/blob/feat/add-columns-resize/src/lib/DataTable.tsx#L1147

So check if (!column.resizeable) should be enough in here and everywhere else. However, final resizeable property on column doesn't implies actual onResize and width types. So this check here to not add additional logic to ResizeHandler and to not use type assertions.

[ma-efremoff]

Is it possible to resize a column without explicitly defined width property?

[artemmufazalov]

No. If width isn't set explicitly, it will work as before - column width corresponds to content width

[ma-efremoff]

May be it is better to name it ColumnWidthByName/WidthByColname /WidthByName (not an issue).

[ma-efremoff]

Current implementation promotes to use localStorage of browser and it doesn't looks like a good idea cause it has 5MB limit for stored data. And some services with many tables may overflow the limit in some time. It is better to require some abstract methods in parameters of the hook:

function useTableResize(
    params: {
        saveSizes: (data: TableColumnsWidthSetup) => void;
        getSizes: () => TableColumnsWidthSetup;
    }
): [TableColumnsWidthSetup, HandleResize] {
    ...
}```

[artemmufazalov]

I assumed this hook as basic implementation with the possibility to write your own hook if needed (that is why it is a separate hook, but not some logic inside DataTable). But your solution event better, I'll use it