react-tablix

TABLIX

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

- rowGroup

datatype: object

required

{
    by: 'field_name',
    sort: (a,b) => {},
    filter: dataSet => { return dataSet.filter(t => t.id > 2) },

    // option
    group: {
        
    }
}

- columns

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: '',
                        }
                    ]
                }
            ]
        }
    ]

data

array

required

[
    {
        field_name1: value，
        field_name2: value，
        field_name3: value，
        field_name4: value，
    }
]

style

className

transported

row transport to column.

Aggregate Function

just use detail column, and have set field column

Tablix.AGGREGATE_TYPE

• 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(<Tablix {...opt} />, document.getElementById('root));