反应材料表列可调整大小答案

【问题标题】：React material-table column resizable反应材料表列可调整大小
【发布时间】：2020-06-10 14:49:54
【问题描述】：

我想知道如何在反应中调整材料表列的大小。请帮我。我试过下面的代码


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

【问题讨论】：

欢迎使用 SO，请提供更多代码行作为示例，以便我们了解您的问题
据我了解，material-table 不支持调整大小，您确定您使用的是 material-table 或其他一些 table 包吗？所有材料表道具都可以在这里找到material-table.com/#/docs/all-props
我检查了 material-table.com 中的所有道具，但找不到列可调整大小的道具。你确定材料表不允许调整列的大小
根据我发送的链接，似乎无法调整列的大小。如果这是一个必须存在的功能，也许可以看看一些替代品，例如 (Material-ui-datatables)[material-ui-datatables.com/] 它具有可调整大小的列功能
查看这个示例，了解如何在反应中使表格列可调整大小和可排序：codesandbox.io/s/k9n3y82wov?file=/Utils.js。 Material-UI 不提供使列宽开箱即用可调整大小的选项。

标签： reactjs material-table

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

mui.com/api/data-grid/data-grid-pro

【解决方案3】：

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

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

resize 默认为 true

【讨论】：

【解决方案4】：

material-ui 表中没有调整大小的路径。可以使用material-ui数据网格-(Demo Link):https://material-ui.com/components/data-grid/demo/#data-grid-demo.

或者

你可以像这样重写现有的material-ui表格样式：

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

【讨论】：