Search code examples
javascriptcssreactjsmaterial-table

How to add rowStyle for alternative rows in "material-table"?


I want to apply rowstyles alternative rows in material-table


Solution

  • I hope you are referring to this material-table, if so then you can use rowStyle.

    <MaterialTable
          title="Row Styling Preview"
          columns={[
            { title: 'Name', field: 'name' },
            { title: 'Surname', field: 'surname' },
            { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
            {
              title: 'Birth Place',
              field: 'birthCity',
              lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
            },
          ]}
          data={[
            { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
            { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
                    { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
                            { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
          ]}
          options={{
            rowStyle: x => {
                 if (x.tableData.id % 2) {
                     return {backgroundColor: "lightgreen"}
                 }
             }
          }}
        />
    

    enter image description here