带有粘性标题的材料表和带有操作项的粘性列答案

【问题标题】：Material table with sticky header and sticky columns with action item带有粘性标题的材料表和带有操作项的粘性列
【发布时间】：2021-09-06 19:29:23
【问题描述】：

我为粘性标题和粘性列尝试过的代码，问题是两者没有一起工作尝试了这么多选项，但有时粘性标题无法与水平滚动一起使用，并且最后一列操作项不可见如果定义右侧粘性列

<MaterialTable
   columns={columns
            .filter(l => selectedColumns.includes(l.field as keyof T))
            .map(val => ({
              ...val,
              headerStyle: {
                whiteSpace: 'nowrap',
                // minWidth: '400px',
              },
              cellStyle: {
                whiteSpace: 'nowrap',
                // minWidth: '400px',
              },
            }))}
          localization={localization}
          icons={icons}
          options={{
            ...options,
               // paging: false,
                maxBodyHeight: '550px',
              headerStyle: { position: 'sticky',top: 0},
              overflowY?: "scroll",
            //  actionsCellStyle?: { paddingRight: '23px'},
            selection: showMultiSelector,
            //actionsColumnIndex: 0,
            fixedColumns: fixLeftMostColumn
              ? {
                  right: -1,
                }
              : {},
          }}
/>

【问题讨论】：

标签： material-ui react-material

【解决方案1】：

找到了一些解决方案，但用材料 ui 和反应看上面的例子。 https://codesandbox.io/s/bn7c7?file=/demo.js 带有粘性标题的材料表和带有操作项的粘性列

【讨论】：