Is there a way to add new row to the table in editing mode?

[groyee]

I am looking for a way to add a new row to a table. In material-table it looked like that:

When you click "add", a new row is added automatically in edit mode.

Is there something similar here or I need to implement it myself?

Thanks

[groyee]

OK... I implemented it myself. It's actually not that hard. Curious if that's the right way...

const ProjectDetails: FC = () => {
    const data = useData(); // Custom hook to get data for the table
    const columns = useProjectDetailsColumns(); // Custom hook to create columns for the table
    const [table, setNewRow] = useState(null); // This is to save the temporary new row

    const onEditingRowCancel = () => {
        setNewRow(null);
    }

    const handleCreateNewRow = (table: MRT_TableInstance<IProjectDetailsView>) => {
        setNewRow(table); // Flag that we have a new temporary row. We need to save the table... Maybe there is a better way?
    };

    const handleSaveRowEdits: MaterialReactTableProps<IMyData>['onEditingRowSave'] =
    async ({ exitEditingMode, row, values }) => {
        addData({...values} as IMyData) // Add new object
        setNewRow(null); // Reset the temp row
        exitEditingMode();  // Exit edit mode

    };

    const addData = (budget : IMyData) => {
        // Custom logic to add item to the data
    }

    useEffect(() => {
        if (table) { //If we have a temp new row then let's put it in edit mode
            const row = table.getRow('0');
            table.setEditingRow(row as SetStateAction<MRT_Row<IMyData>>);
        }
    }, [table])

    const handleCreateNewRow = (table: MRT_TableInstance<IMyData>) => {
        setNewRow(table);
    };

    return (  
        <MRTTable  
        onEditingRowCancel = {onEditingRowCancel}
        onEditingRowSave={handleSaveRowEdits}
        columns={columns}
        data={table ? [{}, ...data] : data } //If we have temp row, then add it to the rendering data as a first row
        renderTopToolbarCustomActions={({table}) => (
            <Button
              color="secondary"
              onClick={() => handleCreateNewRow(table)}
              variant="contained"
            >
              Add New Row
            </Button>
          )}
      )
}

[AdityaBhadange]

@groyee Hey, I forgot about your above line of code. Now I'm able to add a new row in the zeroth element. Thanks for pointing it out. This should also be an inbuilt feature, but implementation is easy, so I don't know if it should be in the source.

[KevinVandy]

@AdityaBhadange It was one of my original goals to have a "create row" built into the library, but when I originally tried it, I could not get it to work quite right in all situations, so put it off for later, and created the editing crud example on the site to just implement it manually with a modal at least. I'm somewhat for trying to add it as an internal feature again, but haven't figured out the best api or prop to send an update to the data yet, or whether or not that's what people want.

[AdityaBhadange]

@KevinVandy Understandable. Thank you. We will see how it goes!

[mlapenna7]

I would like this feature as well. I like what you did with the modal. However, some power users will probably prefer the inline row add, especially after migrating from material-table. Any chance this is going to be worked on in the near future?

[KevinVandy]

It's coming soon in v2. See here for what the API will look like

https://www.mantine-react-table.com/docs/examples/editing-crud-inline-row

[mlapenna7]

Yes sir. That's exactly the feature. You will get lots of kudos for this.

…

On Thu, Aug 3, 2023, 17:54 Kevin Van Cott ***@***.***> wrote: It's coming soon in v2. See here for what the API will look like https://www.mantine-react-table.com/docs/examples/editing-crud-inline-row — Reply to this email directly, view it on GitHub <#283 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD5HM3RTP7UPAPK5TGHGA4LXTQMZDANCNFSM6AAAAAATJPBQ7I> . You are receiving this because you commented.Message ID: <KevinVandy/material-react-table/repo-discussions/283/comments/6632145@ github.com>

[mlapenna7]

Hi Kevin. It seems like Mantine and Material React Table (MRT) are kind of progressing in parallel. [Maybe Mantine is a bid ahead] Do you foresee yourself supporting just Mantine and letting MRT fall by the wayside? I am trying to decide which to use for an upcoming project (I used Material-Table for the last 2Y). One thing I definitely need to do is offer AutoComplete in some of the table's columns along with inline Adds/Edits. Let me know what you suggest. Mike

…

On Thu, Aug 3, 2023 at 5:54 PM Kevin Van Cott ***@***.***> wrote: It's coming soon in v2. See here for what the API will look like https://www.mantine-react-table.com/docs/examples/editing-crud-inline-row — Reply to this email directly, view it on GitHub <#283 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD5HM3RTP7UPAPK5TGHGA4LXTQMZDANCNFSM6AAAAAATJPBQ7I> . You are receiving this because you commented.Message ID: <KevinVandy/material-react-table/repo-discussions/283/comments/6632145@ github.com>

-- Mike Lapenna

[KevinVandy]

It definitely is not my plan. My startup work which uses Mantine has just been a bit busier than I thought. MUI should still be the top priority by popularity. I'm just a bit behind.