x-canvas-table

v0.0.7

Published

4 years ago

a table component got the highest performance that works on canvas.

0High
0Medium
0Low

xwinstone

canvas table canvas table grid

canvas-table

a table component got the highest performance that works on canvas! 🚀

14.7kb gizped, no dependency!

80 columns & 100,000 rows data:

100000*80

Feature

high performance works on canvas. 🚀
event support. such as click, mouseenter, mouseleave, etc. ✨
custom style config. 💄
custom icon support. 👍
tooltip for every component. 🔎
write with typescript. 👔
you can even create your own component to display!!! 💖

! it's just like a table implement on dom!

Examples

basic usage: demo
display 100000 records: demo
load remote data with scroll: demo
fixed header (setting by default, can't change yet)
fixed columns: demo
grouping table head: demo
custom style: demo
render icon component: demo

Usage

import

use npm

npm i x-canvas-table

use cdn

<script src="https://unpkg.com/x-canvas-table/umd/canvastable.min.js"></script>

basic usage

<div id="container"></div>

import CanvasTable from "x-canvas-table";

const columns = [
  {title: 'avatar', dataIndex: 'avatar'},
  {title: 'name',dataIndex: 'name'},
  {title: 'age', dataIndex: 'age'},
  {title: 'address', dataIndex: 'address'}
]
const dataSource = [
  {avatar: '🎅🏻',name: 'chuanJianGuo', age: 74, address: 'America'},
  {avatar: '👵🏻', name: 'caiEnglish', age: 63, address: 'China Taiwan'},
  {avatar: '-',name: 'trump', age: 74, address: 'America'},
  {avatar: '-',name: 'johnson', age: 70, address: 'England'}
]
const ct = new CanvasTable({
  container: document.getElementById('container'),
  columns: columns,
  style: { height: 500, width: '100%' }
})

ct.source = dataSource;

result: basic usage

online demo: click

API

Table

IColumn

One of the Table columns prop for describing the table's columns.

ITableStyleProps

You can custom your table style use this prop

onRow usage

Event binding, same as onRow and onCell

interface ITableEventHandler {
    (record: object, rowIndex: number): {
        onClick?: (event) => void,       // onClick Event
        onDoubleClick?: (event) => void, // Double Click
        onContextMenu?: (event) => void, // Right click Event
        onMouseEnter?: (event) => void,  // Mouse Enter
        onMouseLeave?: (event) => void,  // Mouse Leave
    }
}

// Example:
new CanvasTable({
    onRow: (record, rowIndex) => {
        onClick: () => { alert(`${rowIndex} row clicked`) }
    }
})

Layer Component

it's the basic component in canvas table. you can think it as a div in HTML, it usually used on render property of IColumn interface. you can use it to build a complex component to render.

let's see what we can do.

ILayerStyleProps

if you know css, you will know how to use it immediately.

interface ILayerStyleProps {
  top?: number // assume it's top attribute and when position: absolute
  left?: number // assume it's left attribute and when position: absolute
  width?: number | string // number for px, string for percentage of parent
  height?: number | string  // number for px, string for percentage of parent
  padding?: number | number[]  // same as css
  color?: string               // same as css
  backgroundColor?: string;    // same as css
  border?: string | string[]   // same as css
  fontFamily?: string          // same as css
  fontSize?: string            // same as css
  fontWeight?: 'normal' | 'bold' 
  zIndex?: number              // same as css
  align?: 'left' | 'center' | 'right'
  overflow?: 'hidden' | 'ellipsis'
}

example creating complex render: demo

the following components is all derived from Layer.

Render A Icon Component

it's provide a Svg Component to support rendering svg file,

How to use?

step 1: import svg file && Svg component

import Home from '@/assets/svg/home.svg'
const { Svg } = CanvasTable

step 2: use render property in columns

const columns = [
  {
    title: 'Action',
    render: () => {
      return new Svg({
        popTitle: 'click me',
        path: Home,
        style: {width: 30, height: 30, color: '#1890ff'},
        event: {
          onClick: () => {alert('button click')}
        }
      })
    }
  }
]

full example: demo

Text Component

| Property | Description | Type | Default | :----: | :----: | :----: | :----: | | text | text to show | string | -