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

a web-based(canvas) table render
https://github.com/wolf-table/table-renderer

canvas prettier table-renderer typescript web

Last synced: about 2 months ago
JSON representation

a web-based(canvas) table render

• Host: GitHub
• URL: https://github.com/wolf-table/table-renderer
• Owner: wolf-table
• License: mit
• Created: 2022-07-28T10:54:33.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-07T03:20:52.000Z (over 1 year ago)
• Last Synced: 2024-10-29T23:30:28.601Z (about 2 months ago)
• Topics: canvas, prettier, table-renderer, typescript, web
• Language: TypeScript
• Homepage:
• Size: 253 KB
• Stars: 27
• Watchers: 2
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

  





  

  

  

  

  



## wolf-table-renderer

> A web-based(canvas) JavaScript Table Renderer

## Demo

Open in Stackblitz

## NPM

npm install

```shell

npm install @wolf-table/[email protected]

```

## Usage

```javascript

import TableRenderer, { Cell, Canvas } from "@wolf-table/table-renderer";

const longText = {

  value: 'you are a good boy, a very good boy-------!!!',

  style: 0,

};

function cellText(ri: number, ci: number): string | Cell {

  if (ri === 8 && ci === 1) return longText;

  const value = `${ri}-${ci}`;

  if (ri <= 14 && ri >= 13 && ci <= 12 && ci >= 9) {

    return { value, style: 1 };

  }

  if (ri === 4 && ci === 4) return { type: 'select', value };

  if (ri === 4 && ci === 8) return { type: 'bool', value };

  return value;

}

function cellRenderer(canvas: Canvas, { x, y, width, height }, cell) {

  const type = (cell && cell.type) || '';

  if (type === 'bool') {

    canvas

      .prop({ strokeStyle: '#0069c2', lineWidth: 2 })

      .roundRect((width - 12) / 2, height / 2 - 5, 10, 10, 2)

      .stroke();

  } else if (type === 'select') {

    canvas

      .prop({ fillStyle: '#0069c2' })

      .beginPath()

      .moveTo(width - 12, 2)

      .lineTo(width - 2, 2)

      .lineTo(width - 7, 10)

      .closePath()

      .fill();

  }

  return true;

}

TableRender.create('#table', 1400, 800)

  .scale(1)

  .bgcolor('#fff')

  .colHeader({

    height: 50,

    rows: 2,

    merges: ['A1:C1', 'D1:D2'],

    cellRenderer: (canvas, { x, y, width, height }) => {

      canvas

        .prop({ fillStyle: '#0069c2' })

        .beginPath()

        .moveTo(width - 12, 2)

        .lineTo(width - 2, 2)

        .lineTo(width - 7, 10)

        .closePath()

        .fill();

      return true;

    },

  })

  .merges(['I10:J11', 'B9:D10', 'G21:H22', 'J22:L23', 'I3:K4'])

  .borders([

    ['G3', 'all', 'dashed', '#188038'],

    ['B9', 'outside', 'thick', '#188038'],

    ['M4:N10', 'all', 'medium', '#188038'],

    ['H9:K12', 'inside', 'thick', 'red'],

    ['E14:J16', 'all', 'dotted', 'red'],

    ['E19:M24', 'all', 'thick', '#188038'],

  ])

  // .startRow(1)

  .rows(50)

  .styles([{ bold: true }, { bgcolor: '#ffc107' }])

  .col((index) => (index == 5 ? { width: 100, hide: true } : undefined))

  .freeze('C6')

  .scrollRows(2)

  .scrollCols(1)

  .cell((ri, ci) => cellText(ri, ci))

  .cellRenderer(cellRenderer)

  .render();

```

## Development

```shell

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

cd table-renderer

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