Table 新增表头分组功能

docs/renderers/Column.md

@@ -5,6 +5,7 @@
 -   `type` 默认为 `text`，支持： `text`、`html`、`tpl`、`image`、`progress`、`status`、`date`、`datetime`、`time`、`json`、`mapping`参考 [Field 说明](./Field.md)和[Operation](./Operation.md)。
 -   `name` 用来关联列表数据中的变量 `key`。
 -   `label` 列标题。
+-   `groupName` 如果想要分组，请设置这个！
 -   `copyable` 开启后，会支持内容点击复制。
 -   `width` 列宽度。
 -   `popOver` 是否支持点击查看详情。当内容较长时，可以开启此配置。

examples/components/App.jsx

@@ -49,6 +49,7 @@ import KeyboardsCrudSchema from './CRUD/Keyboards';
 import FootableCrudSchema from './CRUD/Footable';
 import NestedCrudSchema from './CRUD/Nested';
 import MergeCellSchema from './CRUD/MergeCell';
+import HeaderGroupSchema from './CRUD/HeaderGroup';
 import LoadOnceTableCrudSchema from './CRUD/LoadOnce';
 import SdkTest from './Sdk/Test';
 import JSONSchemaForm from './Form/Schem';
@@ -297,6 +298,11 @@ const navigations = [
                         path: 'crud/merge-cell',
                         component: makeSchemaRenderer(MergeCellSchema)
                     },
+                    {
+                        label: '表头分组',
+                        path: 'crud/header-group',
+                        component: makeSchemaRenderer(HeaderGroupSchema)
+                    },
                     {
                         label: '带边栏',
                         path: 'crud/aside',

examples/components/CRUD/HeaderGroup.jsx

@@ -0,0 +1,107 @@
+export default {
+    $schema: "https://houtai.baidu.com/v2/schemas/page.json#",
+    title: "支持表头分组，通过在 cloumn 上设置 groupName 实现。",
+    body: {
+        type: "table",
+        data: {
+            items: [
+                {
+                    "engine": "Trident",
+                    "browser": "Internet Explorer 4.2",
+                    "platform": "Win 95+",
+                    "version": "4",
+                    "grade": "A"
+                },
+                {
+                    "engine": "Trident",
+                    "browser": "Internet Explorer 4.2",
+                    "platform": "Win 95+",
+                    "version": "4",
+                    "grade": "B"
+                },
+                {
+                    "engine": "Trident",
+                    "browser": "AOL browser (AOL desktop)",
+                    "platform": "Win 95+",
+                    "version": "4",
+                    "grade": "C"
+                },
+                {
+                    "engine": "Trident",
+                    "browser": "AOL browser (AOL desktop)",
+                    "platform": "Win 98",
+                    "version": "3",
+                    "grade": "A"
+                },
+                {
+                    "engine": "Trident",
+                    "browser": "AOL browser (AOL desktop)",
+                    "platform": "Win 98",
+                    "version": "4",
+                    "grade": "A"
+                },
+                {
+                    "engine": "Gecko",
+                    "browser": "Firefox 1.0",
+                    "platform": "Win 98+ / OSX.2+",
+                    "version": "4",
+                    "grade": "A"
+                },
+                {
+                    "engine": "Gecko",
+                    "browser": "Firefox 1.0",
+                    "platform": "Win 98+ / OSX.2+",
+                    "version": "5",
+                    "grade": "A"
+                },
+                {
+                    "engine": "Gecko",
+                    "browser": "Firefox 2.0",
+                    "platform": "Win 98+ / OSX.2+",
+                    "version": "5",
+                    "grade": "B"
+                },
+                {
+                    "engine": "Gecko",
+                    "browser": "Firefox 2.0",
+                    "platform": "Win 98+ / OSX.2+",
+                    "version": "5",
+                    "grade": "C"
+                },
+                {
+                    "engine": "Gecko",
+                    "browser": "Firefox 2.0",
+                    "platform": "Win 98+ / OSX.2+",
+                    "version": "5",
+                    "grade": "D"
+                }
+            ]
+        },
+        columns: [
+            {
+                name: "engine",
+                label: "Rendering engine",
+                groupName: "A"
+            },
+            {
+                name: "browser",
+                label: "Browser",
+                groupName: "A"
+            },
+            {
+                name: "platform",
+                label: "Platform(s)",
+                groupName: "B"
+            },
+            {
+                name: "version",
+                label: "Engine version",
+                groupName: "B"
+            },
+            {
+                name: "grade",
+                label: "CSS grade",
+            }
+        ]
+    }
+};

scss/components/_table.scss

@@ -148,6 +148,10 @@
             background-color: $Table-thead-bg;
 
             > th {
+                &[colspan] {
+                    text-align: center;
+                }
+
                 padding: $TableCell-paddingY $TableCell-paddingX;
 
                 &:first-child {
@@ -174,6 +178,10 @@
             }
         }
 
+        > thead > tr + tr {
+            border-top: $Table-borderWidth solid $Table-borderColor;
+        }
+
         > tbody > tr {
             border-top: $Table-borderWidth solid $Table-borderColor;
 

src/renderers/Table.tsx

@@ -896,6 +896,13 @@ export default class Table extends React.Component<TableProps, object> {
                 <div className={cx('Table-wrapper')}>
                     <table ref={this.affxiedTableRef} className={tableClassName}>
                         <thead>
+                            {store.columnGroup.length ? (
+                                <tr>
+                                    {store.columnGroup.map((item, index) => (
+                                        <th key={index} colSpan={item.colSpan}>{item.label}</th>
+                                    ))}
+                                </tr>
+                            ) : null}
                             <tr>
                                 {store.filteredColumns.map(column =>
                                     this.renderHeadCell(column, {
@@ -928,6 +935,13 @@ export default class Table extends React.Component<TableProps, object> {
                 className={cx('Table-table', store.combineNum > 0 ? 'Table-table--withCombine' : '', tableClassName)}
             >
                 <thead>
+                    {store.columnGroup.length ? (
+                        <tr>
+                            {store.columnGroup.map((item, index) => (
+                                <th key={index} colSpan={item.colSpan}>{item.label}</th>
+                            ))}
+                        </tr>
+                    ) : null}
                     <tr>
                         {columns.map(column =>
                             this.renderHeadCell(column, {
@@ -1341,6 +1355,13 @@ export default class Table extends React.Component<TableProps, object> {
                     >
                         <table ref={this.tableRef} className={tableClassName}>
                             <thead>
+                                {store.columnGroup.length ? (
+                                    <tr>
+                                        {store.columnGroup.map((item, index) => (
+                                            <th key={index} colSpan={item.colSpan}>{item.label}</th>
+                                        ))}
+                                    </tr>
+                                ) : null}
                                 <tr>
                                     {store.filteredColumns.map(column =>
                                         this.renderHeadCell(column, {

src/store/table.ts

@@ -21,6 +21,7 @@ export const Column = types
         label: types.optional(types.frozen(), undefined),
         type: types.string,
         name: types.maybe(types.string),
+        groupName: '',
         toggled: false,
         toggable: true,
         searchable: types.maybe(types.frozen()),
@@ -252,6 +253,53 @@ export const TableStore = iRendererStore
             });
         }
 
+        function getColumnGroup():Array<{
+            label: string,
+            colSpan: number
+        }> {
+            const columsn = getFilteredColumns();
+            const len = columsn.length;
+
+            if (!len) {
+                return [];
+            }
+
+            const result:Array<{
+                label: string,
+                colSpan: number
+            }> = [
+                {
+                    label: columsn[0].groupName,
+                    colSpan: 1
+                }
+            ];
+
+            //  如果是勾选栏，让它和下一列合并。
+            if (columsn[0].type === '__checkme' && columsn[1]) {
+                result[0].label = columsn[1].groupName;
+            }
+
+            for (let i = 1; i < len; i++) {
+                let prev = result[result.length -1];
+                const current = columsn[i];
+
+                if (current.groupName === prev.label) {
+                    prev.colSpan++;
+                } else {
+                    result.push({
+                        label: current.groupName,
+                        colSpan: 1
+                    });
+                }
+            }
+
+            if (result.length === 1 && !result[0].label) {
+                result.pop();
+            }
+
+            return result;
+        }
+
         return {
             get filteredColumns() {
                 return getFilteredColumns();
@@ -326,7 +374,11 @@ export const TableStore = iRendererStore
                 return getHoverIndex();
             },
 
-            getData
+            getData,
+
+            get columnGroup() {
+                return getColumnGroup();
+            }
         };
     })
     .actions(self => {