Material Table Add Row position

Question

When we click Add Row in material table , the "new edit row" appears at the bottom of the table. This is an issue when you have more rows per page, user has to scroll every time to add anything.

I want "Edit Row" to appear at top instead of bottom.

score 2 · Accepted Answer · answered Mar 07 '21 at 13:14

You should set addRowPoistion option to first, like this:

  <MaterialTable
        columns={tableColumns}
        data={data}
        title="Material Table - Add Row Position "
        options={{
          addRowPosition: "first",
          search: false,
          actionsColumnIndex: -1,
        }}
    ...
    />

Full sandbox here.

Material Table Add Row position

1 Answers1