Tables

Data tables display sets of raw data. They usually appear in desktop enterprise products.

Basic Table

To show this type of Cards you will need this code in down here.

     
 <Table>
    <TableHead>
        <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell numeric>Calories</TableCell>
            <TableCell numeric>Fat (g)</TableCell>
            <TableCell numeric>Carbs (g)</TableCell>
            <TableCell numeric>Protein (g)</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
        {data.map(n => {
            return (
                <TableRow key={n.id}>
                    <TableCell>{n.name}</TableCell>
                    <TableCell numeric>{n.calories}</TableCell>
                    <TableCell numeric>{n.fat}</TableCell>
                    <TableCell numeric>{n.carbs}</TableCell>
                    <TableCell numeric>{n.protein}</TableCell>
                </TableRow>
            );
        })}
    </TableBody>
</Table>
  

Data Table

     
<TableHead>
    <TableRow>
        <TableCell padding="checkbox">
            <Checkbox color="primary"
                      indeterminate={numSelected > 0 && numSelected < rowCount}
                      checked={numSelected === rowCount}
                      onChange={onSelectAllClick} />
        </TableCell>
        {columnData.map(column => {
            return (
                <TableCell
                        key={column.id}
                        numeric={column.numeric}
                        padding={column.disablePadding ? 'none' : 'default'} >
                    <Tooltip
                            title="Sort"
                            placement={column.numeric ? 'bottom-end' : 'bottom-start'}
                        enterDelay={300} >
                        <TableSortLabel
                                active={orderBy === column.id}
                            direction={order}
                            onClick={this.createSortHandler(column.id)} >
                            {column.label}
        </TableSortLabel>
        </Tooltip>
        </TableCell>
        );
        }, this)}
    </TableRow>
</TableHead>
   

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
children *	node		The content of the table, normally TableHeader and TableBody.
classes	object		Useful to extend the style applied to components.
component	union: string |  func	'table'	The component used for the root node. Either a string to use a DOM element or a component.