KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agent #developer-tools #codex #typescript #cli #deepseek-harness #claude-code #ai-agents #mcp #rust

canvastable

★ 103 Open GitHub ↗

a table that display mass of data for web with fastest speed.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# canvas-table

English | <a href="./doc/README_CN.md">中文</a>

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

14.7kb gizped, no dependency!

80 columns & 100,000 rows data:

![100000*80](https://raw.githubusercontent.com/xwinstone/canvastable/master/assets/100000-80.gif)

## 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: <a href="https://codepen.io/xwinstone/pen/dyMWLgN" target="_blank">demo</a>
* display 100000 records: <a href="https://codepen.io/xwinstone/pen/abNWrpp" target="_blank">demo</a>
* load remote data with scroll: <a href="https://codepen.io/xwinstone/pen/MWymdBe" target="_blank">demo</a>
* fixed header (setting by default, can't change yet)
* fixed columns: <a href="https://codepen.io/xwinstone/pen/XWdRwog" target="_blank">demo</a>
* grouping table head: <a href="https://codepen.io/xwinstone/pen/yLOXRJd" target="_blank">demo</a>
* custom style: <a href="https://codepen.io/xwinstone/pen/NWNgOjo" target="_blank">demo</a>
* render icon component: <a href="https://codepen.io/xwinstone/pen/ExKwzvY" target="_blank">demo</a>

## Usage
### import
1. use npm
```shell script
npm i x-canvas-table
```

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

### basic usage
```html
<div id="container"></div>
```

```js
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](https://raw.githubusercontent.com/xwinstone/canvastable/master/assets/basic-usage.png)

online demo: <a href="https://codepen.io/xwinstone/pen/dyMWLgN" target="_blank">click</a>

### IColumnProps
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`
```ts
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
    }
}
```
```js
// 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.
```ts
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: <a href="https://codepen.io/xwinstone/pen/Rwajgqe" target="_blank">demo</a>

> 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
```js
import Home from '@/assets/svg/home.svg'
const { Svg } = CanvasTable
```
step 2: use render property in columns 
```js
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: <a href="https://codepen.io/xwinstone/pen/ExKwzvY" target="_blank">demo</a>

### Text Component

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

canvastable

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README