React material-table 列可调整大小

Question

我想知道如何在 React 中调整 material-table 列的大小。请帮我。我试过下面的代码


        options={{
         sorting:false,
         resizable:true,

Answer 1

material-uitable中没有resize路径。你可以使用 material-ui 数据网格 -(Demo Link): https://material-ui.com/components/data-grid/demo/#data-grid-demo.

或

您可以重写现有的 material-ui table 样式，例如：

.MuiTableHead-root .MuiTableRow-root .MuiTableCell-head {
    font-weight: bold;
    resize: horizontal;
    overflow-x: overlay;
    overflow-y: hidden;
    border-right: 1px solid;
}

Answer 2

Material UI 数据网格列大小调整不起作用。

      [
      { field: 'id', header: 'id'},
      { field: 'count', header: 'Count', type: 'number'},
      { field: 'total', header: 'Total', type: 'number'}
       ];

resize 应该默认为 true

Answer 3

此功能包含在付费的 DATAGRID-PRO 中

Answer 4

我发现指定单元格样式有助于操纵列大小

   {
        field: 'Resizing',
        title: 'Column Width',
        cellStyle: {
          whiteSpace: 'nowrap',
          width: '20%',
        },
   },

Answer 5

Material UI 现在不受支持，但您可以在每个单元格的 header 的右边缘放置一个 div 以调整其列的大小。这是我的解决方案 Resize columns table Material-ui

React material-table 列可调整大小

React material-table column resizable

reactjs

material-table