Data Table

Data Tables display sets of data. - Material Docs

import { DataTable } from 'material-bread';

DataTables are built from sub components, DataTableCell , DataTableHeader , DataTablePagination , and DataTableRow . Below is a simple example.

Nutrition





Desert

Calories

Fat (g)

Carbs (g)

Protein (g)



Frozen yogurt

159

6.0



Ice Cream Sandwich

237

9.0

4.3



Eclair

262

16.0

6.0

Live Editing

class Table extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      checkedOne: false,
      checkedTwo: false,
      checkedThree: false
    }
  }
  render() {
    return (
      <DataTable>
          <DataTableHeader
            title={'Nutrition'}
            rightActions={[
              {name: 'filter-list'},
              {name: 'more-vert'},
            ]} 
          />
          <DataTableRow checkboxOffset>
            <DataTableCell text={'Desert'} type={'header'} borderRight relativeWidth={2} />
            <DataTableCell
              text={'Calories'}
              type={'header'}  right
            />
            <DataTableCell text={'Fat (g)'}  type={'header'}  right />
            <DataTableCell text={'Carbs (g)'}  type={'header'}  right />
            <DataTableCell text={'Protein (g)'}  type={'header'}  right />
          </DataTableRow>
          <DataTableRow
            hover 
            showCheckbox
            selected={this.state.checkedOne}
            onPressCheckbox={() =>
                this.setState({ checkedOne: !this.state.checkedOne })
            }>
            <DataTableCell text={'Frozen yogurt'} borderRight relativeWidth={2} />
            <DataTableCell text={'159'} right />
            <DataTableCell text={'6.0'} right />
            <DataTableCell text={'24'} right />
            <DataTableCell text={'4'} right />
          </DataTableRow>
          <DataTableRow
              hover
              showCheckbox
              selected={this.state.checkedTwo}
              onPressCheckbox={() =>
                  this.setState({ checkedTwo: !this.state.checkedTwo })
              }>
              <DataTableCell text={'Ice Cream Sandwich'} borderRight relativeWidth={2} />
              <DataTableCell text={'237'} right />
              <DataTableCell text={'9.0'} right />
              <DataTableCell text={'37'} right />
              <DataTableCell text={'4.3'} right />
          </DataTableRow>
          <DataTableRow
              hover
              showCheckbox
              selected={this.state.checkedThree}
              onPressCheckbox={() =>
                  this.setState({ checkedThree: !this.state.checkedThree })
              }>
              <DataTableCell text={'Eclair'} borderRight relativeWidth={2} />
              <DataTableCell text={'262'} right />
              <DataTableCell text={'16.0'} right />
              <DataTableCell text={'24'} right />
              <DataTableCell text={'6.0'} right />
          </DataTableRow>
      </DataTable>
    );
  }
}

import React, { Component } from 'react';
import { View } from 'react-native';
import { DataTable, DataTableCell, DataTableRow, } from 'material-bread';

class Table extends React.Component {
    constructor(props) {
      super(props)
    }
    render() {
      return (
        <DataTable>
            <DataTableRow>
                <DataTableCell text={'Desert'} borderRight flex={2} />
                <DataTableCell text={'Calories'} right />
                <DataTableCell text={'Fat (g)'} right />
                <DataTableCell text={'Carbs (g)'} right />
                <DataTableCell text={'Protein (g)'} right />
            </DataTableRow>
            <DataTableRow>
                <DataTableCell text={'Frozen yogurt'} borderRight flex={2} />
                <DataTableCell text={'159'} right />
                <DataTableCell text={'6.0'} right />
                <DataTableCell text={'24'} right />
                <DataTableCell text={'4'} right />
            </DataTableRow>
        </DataTable>
      );
    }
}

See props for each sub component at each comoponent page.

Name

Description

Type

Default

style

Styles root element

object

You can see even more examples in the Storybook environment.

Data Table

Component #

Usage #

Props #

Demos #