README
canvas-table
a table component got the highest performance that works on canvas! 🚀
14.7kb gizped, no dependency!
80 columns & 100,000 rows data:
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:
online demo: click
API
Table
Property | Description | Type | Default |
---|---|---|---|
container |
Container element for table | HTMLElement |
- |
columns |
Columns of table | IColumnProps[] |
- |
source |
Data record array to be displayed | object[] |
- |
style |
Style for table | ITableStyleProps |
see ITableStyleProps |
onScrollLoad |
Callback executed when table scroll to bottom(scrollLoadHeight) | () => Promise<any> |
- |
scrollLoadHeight |
distance to trigger onScrollLoad | number |
150 |
onRow |
Set event props on per row | ITableEventHandler |
- |
iconUrl |
icon font css address | string |
- |
iconFontName |
font family | string |
- |
IColumn
One of the Table columns prop for describing the table's columns.
Property | Description | Type | Default |
---|---|---|---|
dataIndex |
Display field of the data record | object[] |
- |
title |
Title of this column | string |
- |
align |
The specify which way that column is aligned | 'left'|'right' | 'center' | 'left' |
popTitle |
tooltip for table header cell | string |
- |
width |
Width of this column | number |
150 |
children |
Group table head | IColumn[] |
- |
fixed |
Set column to be fixed | 'left' | 'right' | - |
render |
custom render | (value, record) => string | Layer | - |
onCell |
Set event props on per cell | ITableEventHandler |
- |
ITableStyleProps
You can custom your table style use this prop
Property | Description | Type | Default |
---|---|---|---|
width |
width of table | number | string | 100% |
height |
height of table | number | string | 100% |
rowHeight |
height of each row | number |
55 |
columnWidth |
default width of all columns | number |
150 |
borderColor |
color of border | string |
'#e8e8e8' |
textColor |
color of text | string |
'rgba(0,0,0,0.65)' |
fontSize |
font size | string |
14px |
fontFamily |
font family | string |
- |
padding |
both left and right padding of table cell | number |
16 |
headerBackColor |
background color of header cell | string |
'#fafafa' |
headerRowHeight |
height of header cell | number |
55 |
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.
Property | Description | Type | Default |
---|---|---|---|
style |
style of layer | ILayerStyleProps |
- |
event |
event on layer | IEventCollection |
- |
popTitle |
set title attribute a canvas element | string |
- |
children |
children of layer | Layer[] |
- |
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 |
- |