【问题标题】:How to add rowStyle for alternative rows in "material-table"?如何为“材料表”中的替代行添加行样式?
【发布时间】:2021-08-07 10:32:41
【问题描述】:

【问题讨论】:

    标签: javascript css reactjs material-table


    【解决方案1】:

    我希望你指的是这个material-table,如果是,那么你可以使用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"}
                 }
             }
          }}
        />
    

    【讨论】:

    • 如果这个答案对你有用,请点赞,以便其他开发人员也可以使用此代码
    • 我无法投票赞成获得此“感谢您的反馈!您需要至少 15 声望才能投票,但您的反馈已被记录。”
    • 哦,好的。现在你可以做
    猜你喜欢
    • 2020-10-22
    • 2020-05-07
    • 2019-05-24
    • 1970-01-01
    • 1970-01-01
    • 2022-08-05
    • 2020-10-26
    • 1970-01-01
    • 2020-02-10
    相关资源
    最近更新 更多