feat(Table): can resize the fixed column (#5223)

* style: 增加 overflow: hidden 样式

* refactor: 固定列也可以调整列宽

* style: 微调 overflow 样式

* refactor: 增加固定列调整逻辑

* doc: 更新示例

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Table/TablesFixedColumn.razor

@@ -15,15 +15,16 @@
     <section ignore>@((MarkupString)Localizer["TablesFixedColHeaderDescription"].Value)</section>
     <Table TItem="Foo"
            Items="@Items.Take(4)"
-           RenderMode="TableRenderMode.Table"
+           RenderMode="TableRenderMode.Table" AllowResizing="true"
            IsBordered="true"
            IsStriped="true">
         <TableColumns>
             <TableColumn @bind-Field="@context.Name" Width="120" Fixed="true" />
-            <TableColumn @bind-Field="@context.DateTime" Width="180" Fixed="true" Filterable="true" />
+            <TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" />
             <TableColumn @bind-Field="@context.Address" Width="1400" Filterable="true" />
-            <TableColumn @bind-Field="@context.Education" Width="100" Filterable="true" />
-            <TableColumn @bind-Field="@context.Count" Width="100" Filterable="true" />
+            <TableColumn @bind-Field="@context.Hobby" Width="140" />
+            <TableColumn @bind-Field="@context.Education" Width="100" Filterable="true" Fixed="true" />
+            <TableColumn @bind-Field="@context.Count" Width="100" Filterable="true" Fixed="true" />
             <TableColumn @bind-Field="@context.Complete" Width="100" Fixed="true" Filterable="true" />
         </TableColumns>
     </Table>
@@ -34,7 +35,7 @@
            Name="FixedColTableHeader">
     <Table TItem="Foo"
            Items="@Items.Take(10)"
-           RenderMode="TableRenderMode.Table"
+           RenderMode="TableRenderMode.Table" AllowResizing="true"
            IsBordered="true" IsStriped="true"
            IsMultipleSelect="true"
            Height="200"

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -83,7 +83,7 @@
     "TablesFixedColumnNote": "For fixed column usage, please set the fixed column width as much as possible",
     "TablesFixedColHeaderTitle": "Fixed column header and column footer",
     "TablesFixedColHeaderIntro": "Set the <code>Fixed</code> attribute to fix the header",
-    "TablesFixedColHeaderDescription": "In this example, set <code>Name</code> <code>DateTime</code> <code>Complete</code> The first two columns and the last column are fixed columns, and the middle columns are scrolled horizontally",
+    "TablesFixedColHeaderDescription": "In this example, set  <code>Name</code> <code>Education</code> <code>Count</code> <code>Complete</code> The first two columns and the last column are fixed columns, and the middle columns are scrolled horizontally",
     "TablesFixedColTableHeaderTitle": "Fixed headers and columns",
     "TablesFixedColTableHeaderIntro": "Set <code>IsFixedHeader=\"true\"</code> to fix the header, set <code>Fixed</code> to fix the column",
     "TablesFixedExtendButtonsColumnTitle": "Fixed button action column",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -83,7 +83,7 @@
     "TablesFixedColumnNote": "固定列用法请尽可能的设置固定列宽度，本页面如果宽度过长，请 <kbd>F12</kbd> 人为减小可视页面宽度",
     "TablesFixedColHeaderTitle": "固定列头与列尾",
     "TablesFixedColHeaderIntro": "设置 <code>Fixed</code> 属性固定表头",
-    "TablesFixedColHeaderDescription": "本例中设置 <code>Name</code> <code>DateTime</code> <code>Complete</code> 前两列和最后一列为固定列，中间各列进行水平滚动",
+    "TablesFixedColHeaderDescription": "本例中设置 <code>Name</code> <code>Education</code> <code>Count</code> <code>Complete</code> 前两列和最后一列为固定列，中间各列进行水平滚动，本例中设置 <code>AllowResize=\"true\"</code> 固定列也可以调整宽度",
     "TablesFixedColTableHeaderTitle": "固定表头与列",
     "TablesFixedColTableHeaderIntro": "设置 <code>IsFixedHeader=\"true\"</code> 固定表头，设置 <code>Fixed</code> 对列进行固定",
     "TablesFixedExtendButtonsColumnTitle": "固定按钮操作列",

src/BootstrapBlazor/Components/Table/Table.razor

@@ -602,7 +602,7 @@
                                 </Popover>
                             }
                         </div>
-                        @if (!col.Fixed && AllowResizing)
+                        @if (AllowResizing)
                         {
                             <span class="col-resizer" data-bb-field="@col.GetFieldName()"></span>
                         }

src/BootstrapBlazor/Components/Table/Table.razor.js

@@ -586,9 +586,10 @@ const setResizeListener = table => {
                 const marginX = eventX - originalX
                 table.tables.forEach(t => {
                     const group = [...t.children].find(i => i.nodeName === 'COLGROUP')
+                    const calcColWidth = colWidth + marginX;
                     if (group) {
                         const curCol = group.children.item(colIndex)
-                        curCol.style.width = `${colWidth + marginX}px`
+                        curCol.style.setProperty('width', `${calcColWidth}px`);
                         const tableEl = curCol.closest('table')
                         let width = tableWidth + marginX
                         if (t.closest('.table-fixed-body')) {
@@ -606,6 +607,22 @@ const setResizeListener = table => {
                                 tip.update();
                             }
                         }
+
+                        const header = col.parentElement;
+                        if (header.classList.contains('fixed')) {
+                            resizeNextFixedColumnWidth(header, calcColWidth);
+                        }
+                    }
+
+                    const tbody = [...t.children].find(i => i.nodeName === 'TBODY');
+                    if (tbody) {
+                        const rows = [...tbody.children].filter(i => i.nodeName === 'TR');
+                        rows.forEach(row => {
+                            const header = row.children.item(colIndex);
+                            if (header.classList.contains('fixed')) {
+                                resizeNextFixedColumnWidth(header, calcColWidth);
+                            }
+                        });
                     }
                 })
             },
@@ -624,6 +641,25 @@ const setResizeListener = table => {
     })
 }
 
+const resizeNextFixedColumnWidth = (col, width) => {
+    if (col.classList.contains('fixed-right')) {
+        const nextColumn = col.previousElementSibling;
+        if (nextColumn.classList.contains('fixed')) {
+            const right = parseFloat(col.style.getPropertyValue('right'));
+            nextColumn.style.setProperty('right', `${right + width}px`);
+            resizeNextFixedColumnWidth(nextColumn, nextColumn.offsetWidth);
+        }
+    }
+    else if (col.classList.contains('fixed')) {
+        const nextColumn = col.nextElementSibling;
+        if (nextColumn.classList.contains('fixed')) {
+            const left = parseFloat(col.style.getPropertyValue('left'));
+            nextColumn.style.setProperty('left', `${left + width}px`);
+            resizeNextFixedColumnWidth(nextColumn, nextColumn.offsetWidth);
+        }
+    }
+}
+
 const setColumnResizingListen = (table, col) => {
     if (table.options.showColumnWidthTooltip) {
         EventHandler.on(col, 'mouseenter', e => {

src/BootstrapBlazor/Components/Table/Table.razor.scss

@@ -384,6 +384,10 @@
     overflow: hidden;
 }
 
+td > .table-cell {
+    overflow: hidden;
+}
+
 .table tbody td .table-cell:not(.is-wrap) {
     white-space: nowrap;
 }
@@ -555,10 +559,6 @@ tr.active:not(.is-edit):hover {
     pointer-events: none;
 }
 
-.table-fixed-column .table .fixed-right {
-    border-right: inherit;
-}
-
 .table-fixed-column .table .fixed-right.fl {
     border-left: 1px solid var(--bb-table-column-fixed-border-color);
 }