essence-templates
Version:
React Essence Templates - based on Essence Material Design Framework
237 lines (225 loc) • 8.55 kB
JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import ClassNames from 'classnames';
import Icon from 'essence-icon';
import DataTable from 'essence-data-table';
import {Block, Text, Divider} from 'essence-core';
import {Card, CardHeader, CardContent, CardFooter} from 'essence-card';
var tableData = {
'header': [
{
'name': 'Desert (100g serving)',
'tooltip': 'Caption for the column Desert (100g serving)',
'onSorting': (function() { console.log('sort by Desert (100g serving)'); })
},
{
'name': 'Calories',
'tooltip': 'Caption for the column Calories',
'onSorting': (function() { console.log('sort by Calories'); })
},
{
'name': 'Fat (g)',
'tooltip': 'Caption for the column Fat (g)',
'onSorting': (function() { console.log('sort by Fat (g)'); })
},
{
'name': 'Carbs (g)',
'tooltip': 'Caption for the column Carbs (g)',
'onSorting': (function() { console.log('sort by Carbs (g)'); })
},
{
'name': 'Protein (g)',
'tooltip': 'Caption for the column Protein (g)',
'onSorting': (function() { console.log('sort by Protein (g)'); })
},
{
'name': 'Sodium (mg)',
'tooltip': 'Caption for the column Sodium (mg)',
'onSorting': (function() { console.log('sort by Sodium (mg)'); })
},
{
'name': 'Calcium (%)',
'tooltip': 'Caption for the column Calcium (%)',
'onSorting': (function() { console.log('sort by Calcium (%)'); })
},
{
'name': 'Iron (%)',
'tooltip': 'Caption for the column Iron (%)',
'onSorting': (function() { console.log('sort by Iron (%)'); })
},
],
'rows': [
['Frozen yogurt', '159', '6.0', '24', '4.0', '87', '14%', '1%'],
['Ice cream sandwich', '237', '9.0', '37', '4.3', '129', '8%', '1%'],
['Eclair', '262', '16.0', '24', '6.0', '337', '6%', '7%'],
['Cupcake', '305', '16.0', '24', '6.0', '413', '3%', '6%'],
['Gingerbread', '356', '3.7', '67', '4.3', '413', '3%', '8%'],
['Jelly bean', '356', '16.0', '94', '4.3', '129', '8%', '16%'],
['Lollipop', '392', '0.2', '97', '0.0', '50', '0%', '2%'],
['Honeycomb', '408', '3.2', '87', '0.0', '129', '4%', '2%'],
['Donut', '452', '25.0', '51', '4.9', '326', '0%', '1%'],
['KitKat', '518', '26.0', '65', '7.0', '54', '8%', '4%'],
['Input', '518', '26.0', '65', '7.0', '54', '8%', '6%']
],
'footer': {
'limit': 5,
'total': 100,
'pagination': {
'start': 1,
'end': 10,
'callback': (function() { console.log('footer change page'); })
},
'next': {
'context': (<Icon name='hardware-keyboard-arrow-right' />),
'callback': (function() { console.log('footer next page'); })
},
'prev': {
'context': (<Icon name='hardware-keyboard-arrow-left' />),
'callback': (function() { console.log('footer previous page'); })
},
}
};
class AppDataTable extends React.Component {
constructor(props) {
super(props);
this.state = {
classes: ClassNames(
this.props.classes,
this.props.className
)
};
}
render() {
return (
<Block classes={ClassNames('e-container e-padding-top-25', this.state.classes)}>
<Block classes={'e-row'}>
<Block classes={'brick brick-12'}>
<Text type={'h3'} classes={'e-text-indigo-400'}>DATA TABLE</Text>
<Divider classes={'thick short e-background-indigo-400'} />
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 e-padding-top-25 e-padding-bottom-25'} style={{fontSize:'14px'}}>
Data tables display raw data sets. They usually appear in desktop enterprise products.
</Text>
<Card>
<CardContent style={{padding:'0'}}>
<Block classes={'e-text-center'}>
<Block className={ClassNames('e-padding-bottom-25')}>
<DataTable data={tableData} />
</Block>
</Block>
<Divider style={{paddingLeft:'16px',paddingRight:'16px'}} />
<Block style={{paddingLeft:'16px',paddingRight:'16px'}}>
<Text type={'h4'} classes={'e-text-indigo-400'}>HOW TO USE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<pre className={'e-background-grey-100 e-text-black'}>
<code>
npm install <strong>essence-data-table</strong>
</code>
</pre>
<Text classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Use the example bellow to customize your own App.
</Text>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
DataTable component has the following options:
<br />
<br />
1. <strong>data</strong>: an object list with keys: <u>header</u>, <u>rows</u>, <u>footer</u>
<br />
2. <strong>header</strong>: an object list with keys: <u>name</u>, <u>tooltip</u>, <u>onSorting</u> callback
<br />
3. <strong>rows</strong>: an array list with the same number of columns as from header
<br />
4. <strong>footer</strong>: an object list with keys: <u>limit</u>, <u>total</u>, <u>pagination</u> with callback, <u>next</u> with context (icon) & callback, <u>prev</u> with context (icon) & callback
</Text>
<pre className={'e-background-grey-100 e-text-black'}>
<code>
import Icon from 'essence-icon';
<br />
import DataTable from 'essence-data-table';
<br />
<br />
var tableInfo = {
<br />
'header': [
<br />
{
<br />
'name': 'Column 1',
<br />
'tooltip': 'Caption for the column 1',
<br />
'onSorting': (function() { console.log('sort by Column 1'); })
<br />
},
<br />
{
<br />
'name': 'Column 2',
<br />
'tooltip': 'Caption for the column 2',
<br />
'onSorting': (function() { console.log('sort by Column 2'); })
<br />
}
<br />
],
<br />
'rows': [
<br />
['Row 1 Column 1', 'Row 1 Column 2'],
<br />
['Row 2 Column 1', 'Row 2 Column 2'],
<br />
['Row 3 Column 1', 'Row 3 Column 2']
<br />
],
<br />
'footer': {
<br />
'limit': 5,
<br />
'total': 100,
<br />
'pagination': {
<br />
'start': 1,
<br />
'end': 10,
<br />
'callback': (function() { console.log('footer page change'); })
<br />
},
<br />
'next': {
<br />
'context': (<Icon name='hardware-keyboard-arrow-right' />),
<br />
'callback': (function() { console.log('footer next page'); })
<br />
},
<br />
'prev': {
<br />
'context': (<Icon name='hardware-keyboard-arrow-left' />),
<br />
'callback': (function() { console.log('footer previous page'); })
<br />
},
<br />
}
<br />
};
<br />
<br />
<DataTable data={tableInfo}/>
</code>
</pre>
</Block>
</CardContent>
</Card>
</Block>
</Block>
</Block>
);
}
}
exports.AppDataTable = AppDataTable;