How to add ids to material table rows?

Question

I am working with React-material-table. I want to add a custom id to each row, which is then going to be utilized for the identifying elements via selenium. I have gone through the internet but wasn't able to get any help.

Here is what I am doing:

 <MaterialTable
          columns={[
            { title: 'Adı', field: 'name' },
            { title: 'Soyadı', field: 'surname' },
            { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
            { title: 'Doğum Yeri', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' } }
          ]}
          data={[{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 }]}
          title="Demo Title"
        />

How can I add id to each row?

I think you need to look towards component overriding `Row` and pass prop id https://material-table.com/#/docs/features/component-overriding — Nikita Madeev, May 28 '20 at 11:35

score 2 · Accepted Answer · answered May 28 '20 at 11:52

2

Try this (docs check under components)

<MaterialTable        
    components={{
        Row: props => <MTableBodyRow id="SOME-ROW-ID-HERE" {...props} />
    }}

  // other props

/>

answered May 28 '20 at 11:52

kiranvj

32,342
7
71
76

How can we add id to the icon '>' present in material-table for each row when we use detailPanel? – Neha Chaudhary Dec 14 '21 at 10:50
1

@NehaChaudhary it should be possible using `icon` prop of `detailPanel` . Check [this](https://github.com/mbrn/material-table/issues/728) for more details If you ask this as a new question you will get more details – kiranvj Dec 14 '21 at 12:44
And if we want to add id to the checkbox in material-table which we get by setting options = {{selection:true}}? Is there a way to set id to the checkboxes that we get? Also, for the search bar! – Neha Chaudhary Dec 15 '21 at 09:26

How to add ids to material table rows?

1 Answers1