Hi, in tables on setting order multi select there is jittering if move the cursor between the last option and the apply button
0312.mp4
configuration (minimal example):
import type { ColumnDef } from '@gravity-ui/table' ;
import { getSettingsColumn , Table , TableSettings , useTable , useTableSettings } from '@gravity-ui/table' ;
import React from 'react' ;
type IssueRow = {
id : number ;
c1 : string ;
c2 : string ;
c3 : string ;
c4 : string ;
c5 : string ;
c6 : string ;
} ;
const SETTINGS_COLUMN_ID = '_settings' ;
const INITIAL_ORDER = [ 'c1' , 'c2' , 'c3' , 'c4' , 'c5' , 'c6' , SETTINGS_COLUMN_ID ] ;
const COLUMNS : ColumnDef < IssueRow > [ ] = [
{ id : 'c1' , accessorKey : 'c1' , header : 'column 1' , enableResizing : false } ,
{ id : 'c2' , accessorKey : 'c2' , header : 'colimn 2' , enableResizing : false } ,
{ id : 'c3' , accessorKey : 'c3' , header : 'column 3' , enableResizing : false } ,
{ id : 'c4' , accessorKey : 'c4' , header : 'column 4' , enableResizing : false } ,
{ id : 'c5' , accessorKey : 'c5' , header : 'column 5' , enableResizing : false } ,
{ id : 'c6' , accessorKey : 'c6' , header : 'column 6' , enableResizing : false } ,
getSettingsColumn < IssueRow > ( SETTINGS_COLUMN_ID , {
sortable : true ,
enableSearch : true ,
} ) ,
] ;
const DATA : IssueRow [ ] = Array . from ( { length : 5000 } , ( _ , index ) => {
const row = index + 1 ;
return {
id : row ,
c1 : `value ${ row } -1` ,
c2 : `value ${ row } -2` ,
c3 : `value ${ row } -3` ,
c4 : `value ${ row } -4` ,
c5 : `value ${ row } -5` ,
c6 : `value ${ row } -6` ,
} ;
} ) ;
export function ExampleTable ( ) {
const { state, callbacks} = useTableSettings ( {
sortable : true ,
enableSearch : true ,
initialOrdering : INITIAL_ORDER ,
} ) ;
const table = useTable ( {
columns : COLUMNS ,
data : DATA ,
state,
...callbacks ,
getRowId : row => String ( row . id ) ,
} ) ;
return (
< div style = { { width : '100%' , height : '100%' } } >
< Table table = { table} / >
< / div >
) ;
}
Hi, in tables on setting order multi select there is jittering if move the cursor between the last option and the apply button
0312.mp4
configuration (minimal example):