npm install react-tablixTABLIX
Tablix is the conversion of two-dimensional data into complex matrix table.
eg:
from:
id|school|grade|gradeID|schoolClass|scID|course|cid|score|std|teacher|gradeYear|gid
---|---|---|---|---|---|---|---|---|---|---|---|---
1|我的学校|2019级|1|一班|1|语文|1|100|1.1657564|张洋|2017|1
2|我的学校|2019级|1|一班|1|语文|1|50|1.1657564|张洋|2017|1
3|我的学校|2019级|1|一班|1|语文|1|86|1.3|张张|2018|2
4|我的学校|2019级|1|一班|1|数学|2|79|1.2|冯大毛|2017|1
5|我的学校|2019级|1|二班|2|语文|1|92|2.1|张洋|2017|1
6|我的学校|2019级|1|二班|2|数学|2|98|1.5|李四|2017|1
7|我的学校|2018级|2|一班|2|语文|1|85|2.1|刘伟|2017|1
to:
Properties
$3
datatype: object
required
``
{
by: 'field_name',
sort: (a,b) => {},
filter: dataSet => { return dataSet.filter(t => t.id > 2) },
// option
group: {
}
}
`
$3
datatype: array
前面几列定义必须按行组顺序对应！
required
`
[
{
field: 'file_name',
name: 'show name',
rowSpan: 3,
sort: (a,b) => {},
style: '',
className: '',
render: (value, rowData) => {}
},
{
// top group
group: {
by: 'field_name',
name: 'Name', // If you set the name, you will override the group values.
sort: (a,b) => {},
filter: dataSet => { return dataSet.filter(t => t.id > 2) },
columns: [
{
group: {
by: 'field_name',
sort: (a,b) => {},
columns: [
{
field: 'field_name',
name: 'show name',
sort: (a,b) => {},
style: '',
className: '',
aggregate: Tablix.AGGREGATE_TYPE.AVG,
render: (value, rowData) => {},
hide: where => { return false; }
}
]
}
},
// normal column
{
name: 'show name',
columns: [
{
field: 'field_name',
name: '',
},
{
field: 'field_name',
name: '',
}
]
}
]
}
},
{
group: {
by: 'course', // group by
field: 'score', // show value
rowSpan: 3,
},
},
{
name: 'show text',
rowSpan: 2,
columns: [ // To solve multi-line merge mismatch, add a layer of columns, which can be adjusted according to the situation.
{
rowSpan: 0, // 0 don't build cell
columns: [
{
field: 'field_name',
name: '',
},
{
field: 'field_name',
name: '',
}
]
}
]
}
]
$3
array
required
`
[
{
field_name1: value，
field_name2: value，
field_name3: value，
field_name4: value，
}
]
$3
$3
$3
row transport to column.
Aggregate Function
just use detail column, and have set field column
$3
- FIRST this is default
- LAST
- AVG
- SUM
- COUNT
- MAX
- MIN
Usage
`
import React from 'react';
import ReactDOM from 'react-dom';
import Tablix from './Tablix';
let opt = {
rowGroup: {},
columns: {},
data: [
],
style: {},
className: '',
};
ReactDOM.render(
``