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?
Advertisement
Answer
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%" }, // fixed column width { 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!