1.0.7 • Published 9 years ago
essence-data-table v1.0.7
Essence Data Table - Data Table component
Options:
- data: an object list with keys:
header
,rows
,footer
- header: an object list with keys:
name
,tooltip
,onSorting
callback - rows: an array list with the same number of columns as from header
- footer: an object list with keys:
limit
,total
,pagination
with callback,next
with context (icon) & callback,prev
with context (icon) & callback
How to use
import DataTable from 'essence-data-table';
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%', (
<Menu type={'cover'}>
<Input name='input' placeholder='Carja input' counter={true} />
</Menu>
)],
['Donut', '452', '25.0', '51', '4.9', '326', '0%', ([<Text className={'e-left'} key={1}>Item</Text>, <Icon key={2} className={'e-right'} name='communication-contacts' />])],
['KitKat', '518', '26.0', '65', '7.0', '54', '8%', (<Menu type={'cover'}><Text type={'a'} href='http://www.google.com/' target={'_target'}>Google</Text><Text>Item</Text><Icon name='communication-contacts' /></Menu>)],
['Input', '518', '26.0', '65', '7.0', '54', '8%', (<Input name='input' placeholder='Carja input' classes={'has-success'} />)]
],
'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 DataTableTest extends React.Component {
constructor(props) {
super(props);
this.state = {
classes: ClassNames(
this.props.classes,
this.props.className
)
};
}
render() {
return(
<DataTable data={tableData} />
);
}
};
1.0.7
9 years ago
1.0.6
9 years ago
1.0.5
9 years ago
1.0.4
9 years ago
1.0.3
9 years ago
1.0.2
9 years ago
1.0.1
9 years ago
1.0.0
9 years ago
0.0.14
9 years ago
0.0.13
9 years ago
0.0.12
9 years ago
0.0.11
9 years ago
0.0.10
9 years ago
0.0.9
10 years ago
0.0.8
10 years ago
0.0.7
10 years ago
0.0.6
10 years ago
0.0.5
10 years ago
0.0.4
10 years ago
0.0.3
10 years ago
0.0.2
10 years ago