can u change the column settings when create new row. eg table.setCreatingRow ... For New record. want to override enableEditing as opposed to general editing an existing row

[jjwallaby]

Hi,
can u change the column settings when create new row. eg table.setCreatingRow ... For New record. want to override enableEditing as opposed to general editing an existing row ?

[jjwallaby]

Is it possible to add default values when creating a new row.
I am trying to understand. table.setCreatingRow.

It seems it is possible. Can you just pass json attributes ?

      //table.setCreatingRow(true); //simplest way to open the create row modal with no default values
      table.setCreatingRow(true);
      setNewEntry(true);
      //or you can pass in a row object to set default values with the `createRow` helper function
      // table.setCreatingRow(
      //   createRow(table, {
      //     //optionally pass in default values for the new row, useful for nested data or other complex scenarios
      //   }),
      // );

[KevinVandy]

That's what the commented out code is for in that example. Define the originalRow instead of true, which just makes a default empty row.

[KevinVandy]

Also, you can enable editing conditionally. Like you can do enableEditing: (row) => row.id === 'mrt-create-row' to make so that editing in the "creating row" is turned on for all columns. Modify the conditional as needed.

[jjwallaby]

Thanks Kevin,
However if i try that. CreateRow 'createRow' is not defined
Not sure what this function is doing...

[KevinVandy]

you have to import it from "material-react-table", just like where that import is commented out in the official editing crud examples

[jjwallaby]

Great Works!

import {
MaterialReactTable,
useMaterialReactTable,
createRow,
} from 'material-react-table';

renderTopToolbarCustomActions: ({ table }) => (
  <Button
    variant="contained"
    onClick={() => {
      
      //table.setCreatingRow(true); //simplest way to open the create row modal with no default values
      //table.setCreatingRow(true);

      //or you can pass in a row object to set default values with the `createRow` helper function

      table.setCreatingRow(
         createRow(table, {
               "id": "123"
         }),
      );

      setNewEntry(true);
    }}
  >
    Create New {tabledesc}
  </Button>
),