javascript - Is it possible to set a default value for an Material React Table with a select - Stack Overflow

admin管理员组

文章数量:1356024

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

本文标签： javascriptIs it possible to set a default value for an Material React Table with a selectStack Overflow