At the moment I don't know the correct way to use the bryntum reference, so try to handle the changes through the react state, the purpose of this is that I want to get the selected row to perform other actions in another section of the screen outside of bryntum
const handleSelectionChange = useCallback(({ selected, mode }) => {
if (mode === 'row') {
setSelectedRow(selected.length ? selected[0] : null);
}
}, []);
// Bryntum conponent
<BryntumGrid
title={title}
tbar={
headerActions.length > 0 ? {
items: headerActions.map((action) => ({
type: "widget",
html: action,
})),
style: {
display: "flex",
width: "100%",
height: "54px",
},
}
: undefined
}
ref={bryntumRef}
columns={columns}
data={data}
store={{
transformFlatData: true,
}}
// features
treeFeature
filterBarFeature={{
disabled: !enableFilterBar,
// compactMode: false,
}}
cellEditFeature={{
disabled: true,
}}
cellMenuFeature={{
disabled: true,
}}
stripeFeature
// selection config
selectionMode={{
// This enables selection of individual cells
cell: false,
// This enables selection of a column of cells by clicking column header
column: false,
// This adds a row number column which upon click, selects row
rowNumber: false,
// This enables selection of multiple rows using checkboxes
checkbox: checkable,
// This enables selection of multiple rows by holding down shift key
multiSelect: multiCheck,
dragSelect: multiCheck,
// This enables deselection of a row upon click
deselectOnClick: true,
}}
bbar={{
type: "toolbar",
cls: "style-bbar",
items: [
{
type: "container",
html: <BryntumPagination />,
}],
}}
onSelectionChange={handleSelectionChange }
/>
I get as a result:
Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.
Although my react status is updated, in the table, the row is no longer shown as selected, apart from the error shown above, what is wrong?