CODEWITHSUNDEEP
javascriptreactjstypescriptmaterial-uimaterial-table
Linoy Cohen
Linoy Cohen

Reputation: 53

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

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

Upvotes: 4

Views: 2529

Answers (2)

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20088

We can use component to property to set action in the following way.

<MaterialTable
    localization={{header: { actions: '' }}} // rename action column header
    options={{
        actionsColumnIndex: 3, // move action column at what index we need (In mycase right side)
        exportButton: false,
        filtering: false,
        paging: false,
        search: false,
    }}
    columns={[
        { field: 'use', title: 'Use' },
        { field: 'shortName', title: 'Short Name' },
        { field: 'Id', title: 'ID' },
    ]}
    data={[
        { Id: 63, shortName: 'Aliquet', use: 'Eget' },
        { Id: 34, shortName: 'Praesent', use: 'Nibh' },
        { Id: 63, shortName: 'Eget', use: 'Tristique' },
    ]}
    actions={[
        {
            // icon: () => <DeleteOutline/>,
            onClick: (event, rowData) => {},
            tooltip: 'Clear',
        }
    ]}
    components={{
        Action: props => <Button onClick={event => props.action.onClick(event, props.data)}>Clear</Button>, // Customized action button added.
        Toolbar: () => <span></span>, // customize toolbar (In mycase I'm removed toolbar)
    }}
    title={''}
/>

Upvotes: 0

Domino987
Domino987

Reputation: 8774

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.

Upvotes: 1

Related Questions