WEB APP: P8PDataGrid - поддержка фиксированных заголовка и колонок

app/components/p8p_data_grid.js

@@ -35,6 +35,8 @@ const P8PDataGrid = ({
     groups,
     rows,
     size,
+    fixedHeader = false,
+    fixedColumns = 0,
     morePages = false,
     reloading,
     expandable,
@@ -111,6 +113,8 @@ const P8PDataGrid = ({
             orders={orders}
             filters={filters}
             size={size || P8P_DATA_GRID_SIZE.MEDIUM}
+            fixedHeader={fixedHeader}
+            fixedColumns={fixedColumns}
             morePages={morePages}
             reloading={reloading}
             expandable={expandable}
@@ -147,6 +151,8 @@ P8PDataGrid.propTypes = {
     groups: PropTypes.array,
     rows: PropTypes.array.isRequired,
     size: PropTypes.string,
+    fixedHeader: PropTypes.bool,
+    fixedColumns: PropTypes.number,
     morePages: PropTypes.bool,
     reloading: PropTypes.bool.isRequired,
     expandable: PropTypes.bool,

app/components/p8p_table.js

@@ -33,6 +33,7 @@ import {
     Container,
     Link
 } from "@mui/material"; //Интерфейсные компоненты
+import { useTheme } from "@mui/material/styles"; //Взаимодействие со стилями MUI
 import { P8PAppInlineError } from "./p8p_app_message"; //Встраиваемое сообщение об ошибке
 import { P8P_TABLE_AT, HEADER_INITIAL_STATE, hasValue, p8pTableReducer } from "./p8p_table_reducer"; //Редьюсер состояния
 
@@ -85,9 +86,30 @@ const STYLES = {
     TABLE: {
         with: "100%"
     },
+    TABLE_HEAD_STICKY: {
+        position: "sticky",
+        top: 0,
+        zIndex: 1000
+    },
+    TABLE_HEAD_CELL_STICKY: (theme, left) => ({
+        position: "sticky",
+        left,
+        backgroundColor: theme.palette.background.default,
+        zIndex: 1000
+    }),
     TABLE_ROW: {
         "&:last-child td, &:last-child th": { border: 0 }
     },
+    TABLE_CELL_STICKY: (theme, left) => ({
+        position: "sticky",
+        left,
+        backgroundColor: theme.palette.background.default,
+        zIndex: 500
+    }),
+    TABLE_CELL_EXPAND_CONTROL: {
+        minWidth: "60px",
+        maxWidth: "60px"
+    },
     TABLE_CELL_EXPAND_CONTAINER: {
         paddingBottom: 0,
         paddingTop: 0
@@ -95,6 +117,10 @@ const STYLES = {
     TABLE_CELL_GROUP_HEADER: {
         backgroundColor: "lightgray"
     },
+    TABLE_CELL_GROUP_HEADER_STICKY: {
+        position: "sticky",
+        left: 0
+    },
     TABLE_COLUMN_STACK: {
         alignItems: "center"
     },
@@ -460,6 +486,8 @@ const P8PTable = ({
     orders,
     filters,
     size,
+    fixedHeader = false,
+    fixedColumns = 0,
     morePages = false,
     reloading,
     expandable,
@@ -501,6 +529,9 @@ const P8PTable = ({
     //Собственное состояние - колонка с отображаемой подсказкой
     const [displayHintColumn, setDisplayHintColumn] = useState(null);
 
+    //Стили
+    const theme = useTheme();
+
     //Описание фильтруемой колонки
     const filterColumnDef = filterColumn ? columnsDef.find(columnDef => columnDef.name == filterColumn) || null : null;
 
@@ -516,12 +547,12 @@ const P8PTable = ({
         : ["", ""];
 
     //Формирование заголовка таблицы
-    const setHeader = ({ columnsDef, expandable, objectsCopier }) =>
+    const setHeader = ({ columnsDef, expandable, fixedColumns, objectsCopier }) =>
-        dispatchHeaderAction({ type: P8P_TABLE_AT.SET_HEADER, payload: { columnsDef, expandable, objectsCopier } });
+        dispatchHeaderAction({ type: P8P_TABLE_AT.SET_HEADER, payload: { columnsDef, expandable, fixedColumns, objectsCopier } });
 
     //Сворачивание/разворачивание уровня заголовка таблицы
     const toggleHeaderExpand = ({ columnName, objectsCopier }) =>
-        dispatchHeaderAction({ type: P8P_TABLE_AT.TOGGLE_HEADER_EXPAND, payload: { columnName, expandable, objectsCopier } });
+        dispatchHeaderAction({ type: P8P_TABLE_AT.TOGGLE_HEADER_EXPAND, payload: { columnName, expandable, fixedColumns, objectsCopier } });
 
     //Выравнивание в зависимости от типа данных
     const getAlignByDataType = ({ dataType, hasChild }) =>
@@ -621,38 +652,46 @@ const P8PTable = ({
 
     //При изменении описания колонок
     useEffect(() => {
-        setHeader({ columnsDef, expandable, objectsCopier });
+        setHeader({ columnsDef, expandable, fixedColumns, objectsCopier });
-    }, [columnsDef, expandable, objectsCopier]);
+    }, [columnsDef, expandable, fixedColumns, objectsCopier]);
 
     //Генерация заголовка группы
     const renderGroupCell = group => {
         let customRender = {};
         if (groupCellRender) customRender = groupCellRender({ columnsDef: header.columnsDef, group }) || {};
-        return (
+        return header.displayDataColumns.map((columnDef, i) => (
             <TableCell
-                colSpan={header.displayDataColumnsCount}
+                key={`group-header-cell-${i}`}
-                sx={{ ...STYLES.TABLE_CELL_GROUP_HEADER, ...customRender.cellStyle }}
                 {...customRender.cellProps}
+                sx={{
+                    ...STYLES.TABLE_CELL_GROUP_HEADER,
+                    ...customRender.cellStyle,
+                    ...(columnDef.width ? { minWidth: columnDef.width, maxWidth: columnDef.width } : {}),
+                    ...(i == 0 && fixedColumns ? STYLES.TABLE_CELL_GROUP_HEADER_STICKY : {})
+                }}
+                colSpan={expandable && rowExpandRender ? 2 : 1}
             >
-                <Stack direction="row" sx={STYLES.TABLE_COLUMN_STACK}>
+                {i == 0 ? (
-                    {group.expandable ? (
+                    <Stack direction="row" sx={STYLES.TABLE_COLUMN_STACK}>
-                        <IconButton
+                        {group.expandable ? (
-                            onClick={() => {
+                            <IconButton
-                                setExpandedGroups(pv => ({ ...pv, ...{ [group.name]: !pv[group.name] } }));
+                                onClick={() => {
-                            }}
+                                    setExpandedGroups(pv => ({ ...pv, ...{ [group.name]: !pv[group.name] } }));
-                        >
+                                }}
-                            <Icon>{expandedGroups[group.name] ? "indeterminate_check_box" : "add_box"}</Icon>
+                            >
-                        </IconButton>
+                                <Icon>{expandedGroups[group.name] ? "indeterminate_check_box" : "add_box"}</Icon>
-                    ) : null}
+                            </IconButton>
-                    {customRender.data ? customRender.data : group.caption}
+                        ) : null}
-                </Stack>
+                        {customRender.data ? customRender.data : group.caption}
+                    </Stack>
+                ) : null}
             </TableCell>
-        );
+        ));
     };
 
     //Генерация содержимого
     return (
-        <>
+        <div>
             {displayHintColumn ? (
                 <P8PTableColumnHintDialog columnDef={displayHintColumnDef} okBtnCaption={okFilterBtnCaption} onOk={handleHintOk} />
             ) : null}
@@ -684,13 +723,22 @@ const P8PTable = ({
                     valueFormatter={valueFormatter}
                 />
             ) : null}
-
             <TableContainer component={containerComponent ? containerComponent : Paper} {...(containerComponentProps ? containerComponentProps : {})}>
-                <Table sx={STYLES.TABLE} size={size || P8P_TABLE_SIZE.MEDIUM}>
+                <Table stickyHeader={fixedHeader} sx={STYLES.TABLE} size={size || P8P_TABLE_SIZE.MEDIUM}>
-                    <TableHead>
+                    <TableHead sx={fixedHeader ? STYLES.TABLE_HEAD_STICKY : {}}>
-                        {header.displayLevels.map(level => (
+                        {header.displayLevels.map((level, i) => (
                             <TableRow key={level}>
-                                {expandable && rowExpandRender ? <TableCell key="head-cell-expand-control" align="center"></TableCell> : null}
+                                {expandable && rowExpandRender && i == 0 ? (
+                                    <TableCell
+                                        key="head-cell-expand-control"
+                                        align="center"
+                                        sx={{
+                                            ...STYLES.TABLE_CELL_EXPAND_CONTROL,
+                                            ...(fixedColumns ? STYLES.TABLE_HEAD_CELL_STICKY(theme, 0) : {})
+                                        }}
+                                        rowSpan={header.displayLevelsColumns[level][0].rowSpan}
+                                    ></TableCell>
+                                ) : null}
                                 {header.displayLevelsColumns[level].map((columnDef, j) => {
                                     let customRender = {};
                                     if (headCellRender) customRender = headCellRender({ columnDef }) || {};
@@ -698,7 +746,11 @@ const P8PTable = ({
                                         <TableCell
                                             key={`head-cell-${j}`}
                                             align={getAlignByDataType(columnDef)}
-                                            sx={{ ...customRender.cellStyle }}
+                                            sx={{
+                                                ...customRender.cellStyle,
+                                                ...(columnDef.width ? { minWidth: columnDef.width, maxWidth: columnDef.width } : {}),
+                                                ...(columnDef.fixed ? STYLES.TABLE_HEAD_CELL_STICKY(theme, columnDef.fixedLeft) : {})
+                                            }}
                                             rowSpan={columnDef.rowSpan}
                                             colSpan={columnDef.colSpan}
                                             {...customRender.cellProps}
@@ -753,7 +805,14 @@ const P8PTable = ({
                                           <React.Fragment key={`data-${i}`}>
                                               <TableRow key={`data-row-${i}`} sx={STYLES.TABLE_ROW}>
                                                   {expandable && rowExpandRender ? (
-                                                      <TableCell key={`data-cell-expand-control-${i}`} align="center">
+                                                      <TableCell
+                                                          key={`data-cell-expand-control-${i}`}
+                                                          align="center"
+                                                          sx={{
+                                                              ...STYLES.TABLE_CELL_EXPAND_CONTROL,
+                                                              ...(fixedColumns ? STYLES.TABLE_CELL_STICKY(theme, 0) : {})
+                                                          }}
+                                                      >
                                                           <IconButton onClick={() => handleExpandClick(i)}>
                                                               <Icon>{expanded[i] === true ? "keyboard_arrow_down" : "keyboard_arrow_right"}</Icon>
                                                           </IconButton>
@@ -766,7 +825,13 @@ const P8PTable = ({
                                                           <TableCell
                                                               key={`data-cell-${j}`}
                                                               align={getAlignByDataType(columnDef)}
-                                                              sx={{ ...customRender.cellStyle }}
+                                                              sx={{
+                                                                  ...customRender.cellStyle,
+                                                                  ...(columnDef.width
+                                                                      ? { minWidth: columnDef.width, maxWidth: columnDef.width }
+                                                                      : {}),
+                                                                  ...(columnDef.fixed ? STYLES.TABLE_CELL_STICKY(theme, columnDef.fixedLeft) : {})
+                                                              }}
                                                               {...customRender.cellProps}
                                                           >
                                                               {customRender.data
@@ -780,7 +845,15 @@ const P8PTable = ({
                                               </TableRow>
                                               {expandable && rowExpandRender && expanded[i] === true ? (
                                                   <TableRow key={`data-row-expand-${i}`}>
-                                                      <TableCell sx={STYLES.TABLE_CELL_EXPAND_CONTAINER} colSpan={header.displayDataColumnsCount}>
+                                                      <TableCell
+                                                          sx={{
+                                                              ...STYLES.TABLE_CELL_EXPAND_CONTAINER,
+                                                              ...(fixedColumns ? STYLES.TABLE_CELL_STICKY(theme, 0) : {})
+                                                          }}
+                                                          colSpan={
+                                                              fixedColumns ? header.displayFixedColumnsCount + 1 : header.displayDataColumnsCount
+                                                          }
+                                                      >
                                                           {rowExpandRender({ columnsDef, row })}
                                                       </TableCell>
                                                   </TableRow>
@@ -800,19 +873,19 @@ const P8PTable = ({
                             : null}
                     </TableBody>
                 </Table>
-                {rows.length == 0 ? (
-                    noDataFoundText && !reloading ? (
-                        <P8PAppInlineError text={noDataFoundText} />
-                    ) : null
-                ) : morePages ? (
-                    <Container style={STYLES.MORE_BUTTON_CONTAINER}>
-                        <Button fullWidth onClick={handleMorePagesBtnClick}>
-                            {morePagesBtnCaption}
-                        </Button>
-                    </Container>
-                ) : null}
             </TableContainer>
-        </>
+            {rows.length == 0 ? (
+                noDataFoundText && !reloading ? (
+                    <P8PAppInlineError text={noDataFoundText} />
+                ) : null
+            ) : morePages ? (
+                <Container style={STYLES.MORE_BUTTON_CONTAINER}>
+                    <Button fullWidth onClick={handleMorePagesBtnClick}>
+                        {morePagesBtnCaption}
+                    </Button>
+                </Container>
+            ) : null}
+        </div>
     );
 };
 
@@ -829,7 +902,8 @@ P8PTable.propTypes = {
             values: PropTypes.array,
             parent: PropTypes.string,
             expandable: PropTypes.bool.isRequired,
-            expanded: PropTypes.bool.isRequired
+            expanded: PropTypes.bool.isRequired,
+            width: PropTypes.number
         })
     ).isRequired,
     groups: PropTypes.arrayOf(
@@ -849,6 +923,8 @@ P8PTable.propTypes = {
     ).isRequired,
     filters: PropTypes.arrayOf(P8P_TABLE_FILTER_SHAPE).isRequired,
     size: PropTypes.string,
+    fixedHeader: PropTypes.bool,
+    fixedColumns: PropTypes.number,
     morePages: PropTypes.bool,
     reloading: PropTypes.bool.isRequired,
     expandable: PropTypes.bool,

app/components/p8p_table_reducer.js

@@ -19,7 +19,8 @@ const HEADER_INITIAL_STATE = () => ({
     displayLevels: [],
     displayLevelsColumns: {},
     displayDataColumnsCount: 0,
-    displayDataColumns: []
+    displayDataColumns: [],
+    displayFixedColumnsCount: 0
 });
 
 //Состояние описания ячейки заголовка таблицы по умолчанию
@@ -28,6 +29,8 @@ const HEADER_COLUMN_INITIAL_STATE = ({ columnDef, objectsCopier }) => {
     if (!hasValue(tmp.parent)) tmp.parent = "";
     if (!hasValue(tmp.expandable)) tmp.expandable = false;
     if (!hasValue(tmp.expanded)) tmp.expanded = true;
+    if (!hasValue(tmp.fixed)) tmp.fixed = false;
+    if (!hasValue(tmp.fixedLeft)) tmp.fixedLeft = 0;
     return tmp;
 };
 
@@ -55,8 +58,23 @@ const getDisplayColumnColSpan = (displayTree, columnDef) => {
     } else return 1;
 };
 
+//Определения признака зафиксированности колонки
+const getFixedColumns = (displayTree, parentFixed, parentLeft, fixedColumns) => {
+    if (fixedColumns) {
+        let left = parentLeft;
+        displayTree.forEach((columnDef, i) => {
+            left += columnDef.width;
+            if ((columnDef.level == 1 && i + 1 <= fixedColumns) || (columnDef.level > 1 && parentFixed)) {
+                columnDef.fixed = true;
+                columnDef.fixedLeft = left - columnDef.width;
+            } else columnDef.fixed = false;
+            if (columnDef.hasChild) getFixedColumns(columnDef.child, columnDef.fixed, columnDef.fixedLeft, fixedColumns);
+        });
+    }
+};
+
 //Формирование дерева отображаемых элементов заголовка
-const buildDisplayTree = (columnsDef, parent, level) => {
+const buildDisplayTree = (columnsDef, parent, level, expandable, fixedColumns) => {
     const baseBuild = (columnsDef, parent, level) => {
         let maxLevel = level - 1;
         const res = columnsDef
@@ -77,6 +95,7 @@ const buildDisplayTree = (columnsDef, parent, level) => {
     };
     const [displayTree, maxLevel] = baseBuild(columnsDef, parent, level);
     getDisplayColumnRowSpan(displayTree, maxLevel);
+    getFixedColumns(displayTree, false, expandable ? 60 : 0, fixedColumns);
     return [displayTree, maxLevel];
 };
 
@@ -106,28 +125,41 @@ const buildDisplayDataColumns = (displayTree, expandable) => {
     return [displayDataColumns, displayDataColumns.length + (expandable === true ? 1 : 0)];
 };
 
+//Подсчёт количества отображаемых фиксированных колонок
+const getDisplayFixedColumnsCount = displayTree => {
+    let res = 0;
+    const traverseTree = displayTree => {
+        displayTree.forEach(columnDef => (columnDef.hasChild ? traverseTree(columnDef.child) : columnDef.fixed ? res++ : null));
+    };
+    traverseTree(displayTree);
+    return res;
+};
+
 //Формирование описания отображаемых колонок
-const buildDisplay = ({ columnsDef, expandable }) => {
+const buildDisplay = ({ columnsDef, expandable, fixedColumns }) => {
     //Сформируем дерево отображаемых колонок заголовка
-    const [displayTree, maxLevel] = buildDisplayTree(columnsDef, "", 1);
+    const [displayTree, maxLevel] = buildDisplayTree(columnsDef, "", 1, expandable, fixedColumns);
     //Вытянем дерево в удобные для рендеринга структуры
     const [displayLevels, displayLevelsColumns] = buildDisplayLevelsColumns(displayTree, maxLevel);
     //Сформируем отображаемые колонки данных
     const [displayDataColumns, displayDataColumnsCount] = buildDisplayDataColumns(displayTree, expandable);
+    //Подсчитаем количество отображаемых фиксированных колонок
+    const displayFixedColumnsCount = getDisplayFixedColumnsCount(displayTree);
     //Вернём результат
-    return [displayLevels, displayLevelsColumns, displayDataColumns, displayDataColumnsCount];
+    return [displayLevels, displayLevelsColumns, displayDataColumns, displayDataColumnsCount, displayFixedColumnsCount];
 };
 
 //Формирование описания заголовка
-const buildHeaderDef = ({ columnsDef, expandable, objectsCopier }) => {
+const buildHeaderDef = ({ columnsDef, expandable, fixedColumns, objectsCopier }) => {
     //Инициализируем результат
     const res = HEADER_INITIAL_STATE();
     //Инициализируем внутренне описание колонок и поместим его в результат
     columnsDef.forEach(columnDef => res.columnsDef.push(HEADER_COLUMN_INITIAL_STATE({ columnDef, objectsCopier })));
     //Добавим в результат сведения об отображаемых данных
-    [res.displayLevels, res.displayLevelsColumns, res.displayDataColumns, res.displayDataColumnsCount] = buildDisplay({
+    [res.displayLevels, res.displayLevelsColumns, res.displayDataColumns, res.displayDataColumnsCount, res.displayFixedColumnsCount] = buildDisplay({
         columnsDef: res.columnsDef,
-        expandable
+        expandable,
+        fixedColumns
     });
     //Сформируем дерево отображаемых колонок заголовка
     //const [displayTree, maxLevel] = buildDisplayTree(res.columnsDef, "", 1);
@@ -147,19 +179,20 @@ const buildHeaderDef = ({ columnsDef, expandable, objectsCopier }) => {
 const handlers = {
     //Формирование заголовка
     [P8P_TABLE_AT.SET_HEADER]: (state, { payload }) => {
-        const { columnsDef, expandable, objectsCopier } = payload;
+        const { columnsDef, expandable, fixedColumns, objectsCopier } = payload;
         return {
             ...state,
-            ...buildHeaderDef({ columnsDef, expandable, objectsCopier })
+            ...buildHeaderDef({ columnsDef, expandable, fixedColumns, objectsCopier })
         };
     },
     [P8P_TABLE_AT.TOGGLE_HEADER_EXPAND]: (state, { payload }) => {
-        const { columnName, expandable, objectsCopier } = payload;
+        const { columnName, expandable, fixedColumns, objectsCopier } = payload;
         const columnsDef = objectsCopier(state.columnsDef);
         columnsDef.forEach(columnDef => (columnDef.name == columnName ? (columnDef.expanded = !columnDef.expanded) : null));
-        const [displayLevels, displayLevelsColumns, displayDataColumns, displayDataColumnsCount] = buildDisplay({
+        const [displayLevels, displayLevelsColumns, displayDataColumns, displayDataColumnsCount, displayFixedColumnsCount] = buildDisplay({
             columnsDef,
-            expandable
+            expandable,
+            fixedColumns
         });
         //const [displayTree, maxLevel] = buildDisplayTree(columnsDef, "", 1);
         //const [displayLevels, displayLevelsColumns] = buildDisplayLevelsColumns(displayTree, maxLevel);
@@ -170,7 +203,8 @@ const handlers = {
             displayLevels,
             displayLevelsColumns,
             displayDataColumns,
-            displayDataColumnsCount
+            displayDataColumnsCount,
+            displayFixedColumnsCount
         };
     },
     //Обработчик по умолчанию