yu-vue-pivottable

yu-pivottable

• pivottable的简单实现
• 目前只有组件 PivotTable 实现
• PivotTableUI 组件暂未实现
• 参考 PivotTable.js
• 参考 react-pivottable
• js 文件小于10kb

使用方法

preact

import { render } from 'preact';
import { createPivotData, PivotTable, pivotAggregators, PivotCellClick } from 'yu-pivottable';
import 'yu-pivottable/preact/pivot.css';

const mps = await import('./mps.json').then(r => r.default);
const pivotData = createPivotData<Record<string, any>>(mps as any, {
  rows: ['book'],
  cols: ['market', 'product'],
  vals: ['lot'],
  aggregator: pivotAggregators.Sum,
});
const handleCellClick: PivotCellClick = (e, value, filters) => {
  console.log(e, value, filters);
};
render(
  <PivotTable pivotData={pivotData} onCellClick={handleCellClick} />,
  document.getElementById('app') as HTMLElement
);

vue

import { createApp } from 'vue';
import { createPivotData, pivotAggregators, PivotCellClick, PivotTable } from 'yu-vue-pivottable';
import 'yu-pivottable/vue/pivot.css';

const mps = await import('./mps.json').then(r => r.default);
const pivotData = createPivotData<Record<string, any>>(mps as any, {
  rows: ['book'],
  cols: ['market', 'product'],
  vals: ['lot'],
  aggregator: pivotAggregators.Sum,
});
const handleCellClick: PivotCellClick = (e, value, filters) => {
  console.log(e, value, filters);
};
const app = createApp({
  render() {
    return <PivotTable pivotData={pivotData} onCellClick={handleCellClick} />;
  },
});
app.mount('#app__vue');