X-Spreadsheet 设置默认数据，默认样式

文档

文档中没写数据格式是什么样的，下面的代码是这个项目示例的默认数据

<script>
const rows10 = { len: 1000 }
for (let i = 0; i < 1000; i += 1) {
  rows10[i] = {
    cells: {
      0: { text: 'A-' + i },
      1: { text: 'B-' + i },
      2: { text: 'C-' + i },
      3: { text: 'D-' + i },
      4: { text: 'E-' + i },
      5: { text: 'F-' + i },
    },
  }
}
const rows = {
  len: 80,
  1: {
    cells: {
      0: { text: 'testingtesttestetst' },
      2: { text: 'testing' },
    },
  },
  2: {
    cells: {
      0: { text: 'render', style: 0 },
      1: { text: 'Hello' },
      2: { text: 'haha', merge: [1, 1] },
    },
  },
  8: {
    cells: {
      8: { text: 'border test', style: 0 },
    },
  },
}

const data = [
{
  freeze: 'B3',
  styles: [
    {
      bgcolor: '#f4f5f8',
      textwrap: true,
      color: '#900b09',
      border: {
        top: ['thin', '#0366d6'],
        bottom: ['thin', '#0366d6'],
        right: ['thin', '#0366d6'],
        left: ['thin', '#0366d6'],
      },
    },
  ],
  merges: ['C3:D4'],
  cols: {
    len: 10,
    2: { width: 200 },
  },
  name: '123',
  rows,
},
{ name: 'sheet-test', rows: rows10 },
]

到这一步，基本的数据已经配置完成了。在使用的过程中需要更改整个背景色，网格线颜色等样式文档配置中并不支持这些配置。
在github把源码下载下来

更改src\component\table.js 大概在文件第十行左右加入如下代码

//左上角背景色
const leftTopBG = '#FF3B3B'
//索引行，列
const headerBG = '#102E4A'
const headerColor = '#FF3B3B'
const headerLineColor = '#EED33E'
//网格线颜色
const gridLineColor = '#00D1FF'

// gobal var
const cellPaddingWidth = 5
//索引行 列 背景颜色
const tableFixedHeaderCleanStyle = { fillStyle: headerBG }
//网格线
const tableGridStyle = {
  fillStyle: '#EED33E',
  lineWidth: thinLineWidth,
  strokeStyle: gridLineColor,
}

function tableFixedHeaderStyle() {
  return {
    textAlign: 'center',
    textBaseline: 'middle',
    font: `500 ${npx(12)}px Source Sans Pro`,
    fillStyle: headerColor,
    lineWidth: thinLineWidth(),
    strokeStyle: headerLineColor,
  }
}

更改renderFixedLeftTopCell 函数

npm i
npm build
使用打包后的js文件

补充：
可以把前面几个值修改成参数传入

src\index.d.ts interface Options

interface customized {
  leftTopBG: string
  headerBG: string
  headerColor: string
  headerLineColor: string
  gridLineColor: string
}

export interface Options {
  ...
  style?: {
    ...
    color: string
    customized: customized
  }
  ...
}

src\core\data_proxy.js 71行是默认参数

const defaultSettings = {
    ...
     customized: {
      leftTopBG: '#FF3B3B',
      headerBG: '#102E4A',
      headerColor: '#FF3B3B',
      headerLineColor: '#EED33E',
      gridLineColor: '#00D1FF',
    },
}

在src\component\table.js中的renderFixedLeftTopCell()函数中

const {
    draw,
    data: {
      settings: { style },
    },
  } = this
...
...
draw.attr({ fillStyle: style.customized.leftTopBG }).fillRect(0, 0, fw, fh)

使用：