Material-table: How change width of the columns?

梦想与她 提交于 2020-12-15 05:44:17

问题


I'm using the Material Table library that is officially recommended by Google Material UI as a data table library and having troubles with configuring the width of columns.

Column width property is working until our content fits the cell: CodeSandbox Is there any solution to fix that?


回答1:


If you want to set specific width to each column, I believe that you need to specify the option tableLayout: fixed . The docs refers to it like this:

tableLayout | auto or fixed | To make columns width algorithm auto or fixed

So your code could be something like this:

 const tableColumns = [
    { title: "Lorem ipsum", field: "lorem", width: "10%" },
    { title: "Name", field: "name", width: "80%" },
    { title: "Custom status", field: "customStatus", width: "10%" }]


 <MaterialTable
    tableRef={tableRef}
    columns={tableColumns}
    data={tableData}
    onRowClick={(evt, selectedRow) =>
      setSelectedRow(selectedRow.tableData.id)
    }
    title="Remote Data Example"
    options={{
      rowStyle: rowData => ({
        backgroundColor:
          selectedRow === rowData.tableData.id ? "#EEE" : "#FFF"
      }),
      tableLayout: "fixed"
    }}
  />

Here is the sandbox.

Good luck!



来源:https://stackoverflow.com/questions/62539462/material-table-how-change-width-of-the-columns

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!