92 lines
3.6 KiB
TypeScript
92 lines
3.6 KiB
TypeScript
import * as React from 'react';
|
|
import { Table, TableHead, TableRow, TableCell } from '../../components/table';
|
|
import Tooltip from '../../components/tooltip';
|
|
|
|
const data = [
|
|
{ name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium: '3%', iron: '8%' },
|
|
{ name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, sodium: 326, calcium: '2%', iron: '22%' },
|
|
{ name: 'Eclair', calories: 262, fat: 16.0, carbs: 24, protein: 6.0, sodium: 337, calcium: '6%', iron: '7%' },
|
|
{ name: 'Frozen yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, sodium: 87, calcium: '14%', iron: '1%' },
|
|
{ name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, sodium: 327, calcium: '7%', iron: '16%' },
|
|
{ name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, sodium: 129, calcium: '8%', iron: '1%' },
|
|
{ name: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, sodium: 50, calcium: '0%', iron: '0%' },
|
|
{ name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, sodium: 54, calcium: '12%', iron: '6%' },
|
|
];
|
|
|
|
const TooltippedCell = Tooltip(TableCell);
|
|
|
|
const sortByCaloriesAsc = (a: any, b: any) => {
|
|
if (a.calories < b.calories) return -1;
|
|
if (a.calories > b.calories) return 1;
|
|
return 0;
|
|
};
|
|
|
|
const sortByCaloriesDesc = (a: any, b: any) => {
|
|
if (a.calories > b.calories) return -1;
|
|
if (a.calories < b.calories) return 1;
|
|
return 0;
|
|
};
|
|
|
|
class TableTest extends React.Component<any, any> {
|
|
state: any = {
|
|
selected: ['Donut'],
|
|
sorted: 'asc',
|
|
};
|
|
|
|
getSortedData = () => {
|
|
const compare = this.state.sorted === 'asc' ? sortByCaloriesAsc : sortByCaloriesDesc;
|
|
return data.sort(compare);
|
|
}
|
|
|
|
handleRowSelect = (selected: any) => {
|
|
const sortedData = this.getSortedData();
|
|
this.setState({ selected: selected.map((item: any) => sortedData[item].name) });
|
|
};
|
|
|
|
handleSortClick = () => {
|
|
const { sorted } = this.state;
|
|
const nextSorting = sorted === 'asc' ? 'desc' : 'asc';
|
|
this.setState({ sorted: nextSorting });
|
|
};
|
|
|
|
render() {
|
|
const { sorted } = this.state;
|
|
const sortedData = this.getSortedData();
|
|
return (
|
|
<section>
|
|
<h5>Table</h5>
|
|
<p>Organized data.</p>
|
|
|
|
<Table multiSelectable onRowSelect={this.handleRowSelect} style={{ marginTop: 10 }}>
|
|
<TableHead>
|
|
<TooltippedCell tooltip="The total amount of food energy in the given serving size">
|
|
Dessert (100g serving)
|
|
</TooltippedCell>
|
|
<TableCell onClick={this.handleSortClick} numeric sorted={sorted}>Calories</TableCell>
|
|
<TableCell numeric>Fat (g)</TableCell>
|
|
<TableCell numeric>Carbs (g)</TableCell>
|
|
<TableCell numeric>Protein (g)</TableCell>
|
|
<TableCell numeric>Sodium (mg)</TableCell>
|
|
<TableCell numeric>Calcium (%)</TableCell>
|
|
<TableCell numeric>Iron (%)</TableCell>
|
|
</TableHead>
|
|
{sortedData.map((item, idx) => (
|
|
<TableRow key={idx} selected={this.state.selected.indexOf(item.name) !== -1}>
|
|
<TableCell>{item.name}</TableCell>
|
|
<TableCell numeric>{item.calories}</TableCell>
|
|
<TableCell numeric>{item.fat}</TableCell>
|
|
<TableCell numeric>{item.carbs}</TableCell>
|
|
<TableCell numeric>{item.protein}</TableCell>
|
|
<TableCell numeric>{item.sodium}</TableCell>
|
|
<TableCell numeric>{item.calcium}</TableCell>
|
|
<TableCell numeric>{item.iron}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</Table>
|
|
</section>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default TableTest;
|