wolf-table / table

A web-based(canvas) JavaScript Table
MIT License
349 stars 33 forks source link

请问本项目和 X-Spreadsheet 项目是什么关系? #5

Open zwdgit opened 1 year ago

zwdgit commented 1 year ago

X-Spreadsheet 项目简介说已经迁移到本项目了,但是发现本项目目前还只有一些基础功能,没有发现像工具栏、右键菜单、Sheet页等功能

myliang commented 1 year ago

这些功能可以通过api自己去实现

parkb83 commented 4 months ago

Hello, would it be possible to provide an example of how to implement these functions through the API, perhaps the right click menu would be a good example to provide. Thanks

myliang commented 4 months ago

Hello, would it be possible to provide an example of how to implement these functions through the API, perhaps the right click menu would be a good example to provide. Thanks

import WolfTable, { h } from './src';

const t = WolfTable.create(
  '#table',
  () => 1400,
  () => 600,
  {
    scrollable: true,
    resizable: true,
    selectable: true,
    editable: true,
    copyable: true,
  }
)
  .freeze('D5')
  .merge('F10:G11')
  .merge('I10:K11')
  .addBorder('E8:L12', 'all', 'medium', '#21ba45')
  .formulaParser((v) => `${v}-formula`)
  .data({
    styles: [
      {
        bold: true,
        strikethrough: true,
        color: '#21ba45',
        italic: true,
        align: 'center',
        fontSize: 12,
      },
    ],
    cells: [
      [0, 0, 'abc'],
      [1, 1, 100],
      [2, 6, { value: 'formua', style: 0 }],
      [9, 5, { value: '', formula: '=sum(A1:A10)' }],
    ],
  })
  .onClick((cell, evt) => {
    // console.log('cell:', cell, evt);
  })
  .onContextmenu((cell, evt) => {
    console.log('contetmenu:', cell);
    const { x, y, width, height } = cell;
    const content = h('div')
      .css({ background: '#ddd', padding: '10px', 'z-index': '100' })
      .css({
        left: x,
        top: y,
        width,
        height,
        position: 'absolute',
      });
    content.html('---abc--');
    t.container().append(content);
  })
  .render();