From 82cc4181b0a13261d59e27165ceb1dd61b7e5730 Mon Sep 17 00:00:00 2001
From: tomieric <tomieric@gmail.com>
Date: Tue, 26 Apr 2022 17:07:21 +0800
Subject: [PATCH 1/2] feat(cell-header): add custom header option

---
 index.html             | 14 ++++++++++++--
 src/component/table.js | 17 ++++++++++-------
 src/core/helper.js     |  9 +++++++++
 3 files changed, 31 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index a9c2abf3..f3c4ae4c 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 </head>
 <body onload="load()">
   <div style="position: fixed; right: 0; top: .3em;">
-  <iframe src="https://ghbtns.com/github-btn.html?user=myliang&repo=x-spreadsheet&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
+  <!-- <iframe src="https://ghbtns.com/github-btn.html?user=myliang&repo=x-spreadsheet&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe> -->
   </div>
   <div id="x-spreadsheet-demo"></div>
   <script>
@@ -101,7 +101,17 @@
             2: { width: 200 },
           },
           rows,
-        }, { name: 'sheet-test', rows: rows10 }]).change((cdata) => {
+        }, { 
+          name: 'sheet-test', 
+          rows: rows10,
+        },{ 
+          name: 'sheet-custom-header', 
+          rows: rows10,
+          headerCellRender: function(text, ii) {
+            return '第' + text + '列';
+          },
+          headerCellBackground: 'red'
+        }]).change((cdata) => {
           // console.log(cdata);
           console.log('>>>', xs.getData());
         });
diff --git a/src/component/table.js b/src/component/table.js
index 41e1e143..b9d9a822 100644
--- a/src/component/table.js
+++ b/src/component/table.js
@@ -3,6 +3,7 @@ import { getFontSizePxByPt } from '../core/font';
 import _cell from '../core/cell';
 import { formulam } from '../core/formula';
 import { formatm } from '../core/format';
+import { isFunction } from '../core/helper';
 
 import {
   Draw, DrawBox, thinLineWidth, npx,
@@ -184,7 +185,7 @@ function renderSelectedHeaderCell(x, y, w, h) {
 // h: the fixed height of header
 // tx: moving distance on x-axis
 // ty: moving distance on y-axis
-function renderFixedHeaders(type, viewRange, w, h, tx, ty) {
+function renderFixedHeaders(type, viewRange, w, h, tx, ty, headerCellRender) {
   const { draw, data } = this;
   const sumHeight = viewRange.h; // rows.sumHeight(viewRange.sri, viewRange.eri + 1);
   const sumWidth = viewRange.w; // cols.sumWidth(viewRange.sci, viewRange.eci + 1);
@@ -233,7 +234,8 @@ function renderFixedHeaders(type, viewRange, w, h, tx, ty) {
       if (sci <= ii && ii < eci + 1) {
         renderSelectedHeaderCell.call(this, x, 0, colWidth, h);
       }
-      draw.fillText(stringAt(ii), x + (colWidth / 2), h / 2);
+      const text = isFunction(headerCellRender) ? headerCellRender(stringAt(ii), ii) : stringAt(ii);
+      draw.fillText(text, x + (colWidth / 2), h / 2);
       if (i > 0 && data.cols.isHide(i - 1)) {
         draw.save();
         draw.attr({ strokeStyle: '#c6c6c6' });
@@ -314,7 +316,7 @@ class Table {
   render() {
     // resize canvas
     const { data } = this;
-    const { rows, cols } = data;
+    const { rows, cols, headerCellRender } = data;
     // fixed width of header
     const fw = cols.indexWidth;
     // fixed height of header
@@ -331,7 +333,8 @@ class Table {
     // 1
     renderContentGrid.call(this, viewRange, fw, fh, tx, ty);
     renderContent.call(this, viewRange, fw, fh, -x, -y);
-    renderFixedHeaders.call(this, 'all', viewRange, fw, fh, tx, ty);
+
+    renderFixedHeaders.call(this, 'all', viewRange, fw, fh, tx, ty, headerCellRender);
     renderFixedLeftTopCell.call(this, fw, fh);
     const [fri, fci] = data.freeze;
     if (fri > 0 || fci > 0) {
@@ -343,7 +346,7 @@ class Table {
         vr.h = ty;
         renderContentGrid.call(this, vr, fw, fh, tx, 0);
         renderContent.call(this, vr, fw, fh, -x, 0);
-        renderFixedHeaders.call(this, 'top', vr, fw, fh, tx, 0);
+        renderFixedHeaders.call(this, 'top', vr, fw, fh, tx, 0, headerCellRender);
       }
       // 3
       if (fci > 0) {
@@ -352,13 +355,13 @@ class Table {
         vr.eci = fci - 1;
         vr.w = tx;
         renderContentGrid.call(this, vr, fw, fh, 0, ty);
-        renderFixedHeaders.call(this, 'left', vr, fw, fh, 0, ty);
+        renderFixedHeaders.call(this, 'left', vr, fw, fh, 0, ty, headerCellRender);
         renderContent.call(this, vr, fw, fh, 0, -y);
       }
       // 4
       const freezeViewRange = data.freezeViewRange();
       renderContentGrid.call(this, freezeViewRange, fw, fh, 0, 0);
-      renderFixedHeaders.call(this, 'all', freezeViewRange, fw, fh, 0, 0);
+      renderFixedHeaders.call(this, 'all', freezeViewRange, fw, fh, 0, 0, headerCellRender);
       renderContent.call(this, freezeViewRange, fw, fh, 0, 0);
       // 5
       renderFreezeHighlightLine.call(this, fw, fh, tx, ty);
diff --git a/src/core/helper.js b/src/core/helper.js
index dbdc8bb5..775dfccd 100644
--- a/src/core/helper.js
+++ b/src/core/helper.js
@@ -133,6 +133,14 @@ export function numberCalc(type, a1, a2) {
   return ret.toFixed(Math.max(al1, al2));
 }
 
+function getObjType(o) {
+  return Object.prototype.toString.call(o);
+}
+
+export function isFunction(fn) {
+  return getObjType(fn) === '[object Function]';
+}
+
 export default {
   cloneDeep,
   merge: (...sources) => mergeDeep({}, ...sources),
@@ -144,4 +152,5 @@ export default {
   rangeReduceIf,
   deleteProperty,
   numberCalc,
+  isFunction,
 };

From e5555539aa91b88a53ad1c92d11b7bcee20d2040 Mon Sep 17 00:00:00 2001
From: tomieric <tomieric@gmail.com>
Date: Tue, 26 Apr 2022 17:09:19 +0800
Subject: [PATCH 2/2] fix(action-button): revert github action button

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index f3c4ae4c..0dd0b1cf 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 </head>
 <body onload="load()">
   <div style="position: fixed; right: 0; top: .3em;">
-  <!-- <iframe src="https://ghbtns.com/github-btn.html?user=myliang&repo=x-spreadsheet&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe> -->
+  <iframe src="https://ghbtns.com/github-btn.html?user=myliang&repo=x-spreadsheet&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
   </div>
   <div id="x-spreadsheet-demo"></div>
   <script>
