0.1.2 • Published 6 years ago
datagrid-ts v0.1.2
datagrid
Install
npm install datagrid-ts -S
Usage
import * as React from 'react';
import { Container, Segment, Divider, Button } from 'semantic-ui-react';
import { AXDatagrid } from 'datagrid-ts';
export class LargeData extends React.Component<any, any> {
constructor( props ) {
super( props );
let gridData = [];
const typeGroup = {
aTypes: [ 'A', 'B', 'C', 'D' ],
bTypes: [ 'A01', 'A02', 'B01', 'B02', 'C01', 'C02' ],
cTypes: [ 'Thomas', 'Brant', 'Ben', 'Woo' ],
priceTypes: [ 500, 1000, 1500, 2000 ],
amountTypes: [ 1, 2, 4, 5, 10, 20 ],
saleTypes: [ 'T', 'B', 'H', 'W' ],
saleDtTypes: [ '2018-01-20', '2018-01-21', '2018-02-01', '2018-02-02', '2018-02-03' ],
customerTypes: [ '장기영', '황인서', '양용성', '이하종', '김혜미', '홍시아' ]
};
const getTypes = ( typeName: string ) => {
const types = typeGroup[ typeName ];
return types[ Math.floor( Math.random() * types.length ) ];
};
for ( let i = 1; i < 10000; i++ ) {
const price = getTypes( 'priceTypes' );
const amount = getTypes( 'amountTypes' );
gridData.push( {
a: getTypes( 'aTypes' ), b: getTypes( 'bTypes' ), c: getTypes( 'cTypes' ),
saleDt: getTypes( 'saleDtTypes' ), customer: getTypes( 'customerTypes' ), saleType: getTypes( 'saleTypes' ),
price: price, amount: amount, cost: price * amount
} );
}
this.state = {
height: 300,
columns: [
{
key: 'a',
label: '필드A',
width: 80,
align: 'center'
},
{ key: 'b', label: '필드B', align: 'center' },
{ key: 'c', label: '필드C', align: 'center' },
{ key: 'price', label: '단가', formatter: 'money', align: 'right' },
{ key: 'amount', label: '수량', formatter: 'money', align: 'right' },
{ key: 'cost', label: '금액', align: 'right', formatter: 'money' },
{ key: 'saleDt', label: '판매일자', align: 'center' },
{ key: 'customer', label: '고객명', align: 'center' },
{ key: 'saleType', label: '판매타입', align: 'center' }
],
data: gridData,
options: {
lineNumberColumnWidth: 60,
header: {
align: 'center'
},
showLineNumber: true,
showRowSelector: false
}
}
}
private changeConfig( props, value ) {
const processor = {
'setHeight': () => {
this.setState( {
height: value
} );
}
};
if ( props in processor ) {
processor[ props ].call( this );
} else {
this.setState( value );
}
}
render() {
return (
<Container>
<Segment basic padded>
<h1>LargeData</h1>
<AXDatagrid
height={this.state.height}
style={{ fontSize: '12px' }}
columns={this.state.columns}
data={this.state.data}
options={this.state.options}
/>
<Divider />
<Button.Group basic size='tiny'>
<Button onClick={e => this.changeConfig( 'setHeight', 300 )} content='height : 300' />
<Button onClick={e => this.changeConfig( 'setHeight', 400 )} content='height : 400' />
<Button onClick={e => this.changeConfig( 'setHeight', 500 )} content='height : 500' />
</Button.Group>
</Segment>
</Container>
)
}
}
0.1.2
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago
0.0.18
6 years ago
0.0.17
6 years ago
0.0.16
6 years ago
0.0.15
6 years ago
0.0.14
6 years ago
0.0.13
6 years ago
0.0.12
6 years ago
0.0.11
6 years ago
0.0.10
6 years ago
0.0.9
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.3
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago