I am trying to make a table with Material UI Table, and when I edit or add a row some values are to be selected from a dropdown. That works as expected, but I would like to have one of the dropdown values as a default when creating a new row, instead of just being an empty value as it is now.
This is my table
const table = useMaterialReactTable({
data: data ?? [],
columns: useMemo(() => [
{
header: 'Name',
accessorKey: 'name',
editable: 'onAdd',
width: 200,
muiEditTextFieldProps: {
placeholder: 'Name'
}
},
{
header: 'Dropdown',
accessorKey: 'dropdown',
editVariant: 'select',
editSelectOptions: dropdown_values,
filterVariant: 'select',
filterSelectOptions: dropdown_values,
muiEditTextFieldProps: {
value: staff_department
},
width: 200,
},
], [dropdown_values]),
createDisplayMode: 'row',
editDisplayMode: 'row',
enableEditing: true,
onCreatingRowSave: async ({ table, values }) => {
await createNewRow(values);
table.setCreatingRow(false);
},
onEditingRowSave: async ({ table, row, values }) => {
await updateRow({...row.original, ...values});
},
renderRowActions: ({ row, table }) => (
<TableRowControls
onEdit={ () => table.setEditingRow(row) }
/>
),
displayColumnDefOptions: {
'mrt-row-actions': {
visibleInShowHideMenu: false
}
},
enableDensityToggle: false,
enableFullScreenToggle: false,
state: {
density: 'compact'
},
renderTopToolbarCustomActions: ({ table }) => (
<div>
<CreateButton onClick={ () => table.setCreatingRow(true) }/>
</div>
),
});
Is it possible to add a defaultValue for the dropdown?
Thanks for helping