how to put a custom button tag in rows, use material-table and typeScript, and what are the props he expects to receive?

Question

i have some questions :) i try to put an Avatar tag in every row in my table and edit Button, and its take the edit button to both. How can I move an action to the right side of the table? How do I undo the title of "Actions" at the top of the table? And what exactly "PROPS" should I pass if I use TS in the following example:

    <MaterialTable
      icons={tableIcons}
      columns={this.state.columns}
      data={this.state.data}
      title='Users Management'

      actions={[
        {
          icon: 'edit',
          tooltip: 'Edit User',
          onClick: (event) => { alert('Edit!!'); },
        },
        {
          icon: 'avatar',
          tooltip: 'Avatar User',
          onClick: (event) => { alert("You want to delete "); }
        }
      ]}

    components={{
      Action: **props** => (
        <Button
          onClick={(event: any) => props.action.onClick}>
          EDIT
        </Button>
      ),
    }}
    />

enter image description here

Answer 1

So lets split this question into parts:

1. How do I undo the title of "Actions" at the top of the table? You can simply override the localization={{header.actions: 'Test'}} prop to change the action column title to change it e.g. to Test. You can also add a white space to hide it.

2. How can I move an action to the right side of the table? You can override options={{actionsColumnIndex: 1}} to e.g. move it to the second position or set it to -1 to move it to the end of all columns.

3. its take the edit button to both. Since you do not provide custom elements, it renders a text. You have to import icons={tableIcons} as written in the readme. To show an avatar icon, simply add avatars object to your tableIcons object.

4. To know which props to pass, look at this docs page.