【问题标题】:How to toggle content in the rows in Material UI by default?默认情况下如何在 Material UI 中切换行中的内容?
【发布时间】:2021-05-04 10:36:43
【问题描述】:

我正在使用 Muitables,我的问题是,如何默认显示展开的行?如下图所示?

打开页面后,我希望该行的内容默认显示(向下箭头)

谢谢。

代码如下:

const options = {
  expandableRows: true,
  fixedHeader: false,
  sort: false,
  filter: false,
  elevation: 1,
  download: false,
  print: false,
  search: false,
  viewColumns: false,
  rowsSelected: true,
  selectableRows: false,
  rowHover: false,
  responsive: 'scroll',

  customFooter: () => <React.Fragment />,
  renderExpandableRow: (rowData) => {
    
    return (
      <React.Fragment>
        <TableRow>   
          <TableCell>
              entry 1
          </TableCell>
          <TableCell>
            entry 2
          </TableCell>
        </TableRow>
      </React.Fragment>
    )
  }
}

////////////// 这是专栏

export const Table => {
  
  const columns = [
    {
      name: 'fileName',
      label: 'File Name',
      options: {
        customBodyRender: (value, tableMeta) => {

              return (
                
                <div>

                  test column
                </div>
              )
                     
        }
      }
    },
 
  ]
  let arr= []
  // let hasPending = false
   testing.map((file, index) => {
     if(file.fileName !== ''){

          fileStatus=file.fileStatus
          arr.push(file)
     }
   })
  return ( 
    <MuiThemeProvider theme={theme}>
      <MUIDataTable
        title={title}
        data={arr}
        columns={columns}
        options={options}
      />
    </MuiThemeProvider>
  )
}

【问题讨论】:

    标签: javascript css reactjs material-ui toggle


    【解决方案1】:

    您必须切换按钮的当前状态。如果默认设置为“关闭”,则必须切换它。

    如果你分享你的代码会更好,这样我可以更好地帮助你。

    【讨论】:

    • 嗨,冬天,请检查上面的编辑版本.. 谢谢
    • 点击“向下箭头”时,您的 onClick 函数中可能会写入 const [open, setOpen] = React.useState(false);。您必须将其从“假”切换为“真”
    • 你好,冬天,怎么样?我添加了显示要单击的行的列部分。谢谢
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-03-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-13
    • 1970-01-01
    • 2016-06-10
    相关资源
    最近更新 更多