https://github.com/wolf-table/table

A web-based(canvas) JavaScript Table
https://github.com/wolf-table/table

canvas data table typescript

Last synced: 5 days ago
JSON representation

A web-based(canvas) JavaScript Table

• Host: GitHub
• URL: https://github.com/wolf-table/table
• Owner: wolf-table
• License: mit
• Created: 2022-07-28T10:59:19.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-07T07:26:17.000Z (4 months ago)
• Last Synced: 2024-12-01T17:13:18.013Z (12 days ago)
• Topics: canvas, data, table, typescript
• Language: TypeScript
• Homepage:
• Size: 623 KB
• Stars: 445
• Watchers: 10
• Forks: 48
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• jimsghstars - wolf-table/table - A web-based(canvas) JavaScript Table (TypeScript)

README

        


  

    

  





  

  

  

  

  



## wolf-table

> A web-based(canvas) JavaScript Table

## Demo

Open in Stackblitz

Preview in browser

## NPM

npm install

```shell

npm install @wolf-table/[email protected]

```

## Usage

```javascript

import '@wolf-table/table/dist/table.min.css';

import Table from "@wolf-table/table";

const t = Table.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)' }],

    ],

  })

  .render();

// add style

const si = t.addStyle({

  bold: true,

  italic: true,

  underline: true,

  color: '#1b1c1d',

});

// set cell

t.cell(2, 2, { value: 'set-value', style: si }).render();

// get cell

console.log('cell[2,2]:', t.cell(2, 2));

```

## Development

```shell

git clone https://github.com/wolf-table/table.git

cd table

npm install

npm run dev

```

Open your browser and visit http://127.0.0.1:8080.

## Browser Support

Modern browsers(chrome, firefox, Safari).

## LICENSE

MIT

Copyright (c) 2022-present, myliang