Añadir plantilla

Base para front

17 files changed, 1783 insertions, 0 deletions

diff --git a/front/odiparpack/app/containers/Tables/demos/AdvFilter.js b/front/odiparpack/app/containers/Tables/demos/AdvFilter.js
new file mode 100644
index 0000000..091703a
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/AdvFilter.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import MUIDataTable from 'mui-datatables';
+/*
+  It uses npm mui-datatables. It's easy to use, you just describe columns and data collection.
+  Checkout full documentation here :
+  https://github.com/gregnb/mui-datatables/blob/master/README.md
+*/
+class AdvFilter extends React.Component {
+  state = {
+    columns: ['Name', 'Title', 'Location', 'Age', 'Salary'],
+    data: [
+      ['Gabby George', 'Business Analyst', 'Minneapolis', 30, '$100,000'],
+      ['Aiden Lloyd', 'Business Consultant', 'Dallas', 55, '$200,000'],
+      ['Jaden Collins', 'Attorney', 'Santa Ana', 27, '$500,000'],
+      ['Franky Rees', 'Business Analyst', 'St. Petersburg', 22, '$50,000'],
+      ['Aaren Rose', 'Business Consultant', 'Toledo', 28, '$75,000'],
+      ['Blake Duncan', 'Business Management Analyst', 'San Diego', 65, '$94,000'],
+      ['Frankie Parry', 'Agency Legal Counsel', 'Jacksonville', 71, '$210,000'],
+      ['Lane Wilson', 'Commercial Specialist', 'Omaha', 19, '$65,000'],
+      ['Robin Duncan', 'Business Analyst', 'Los Angeles', 20, '$77,000'],
+      ['Mel Brooks', 'Business Consultant', 'Oklahoma City', 37, '$135,000'],
+      ['Harper White', 'Attorney', 'Pittsburgh', 52, '$420,000'],
+      ['Kris Humphrey', 'Agency Legal Counsel', 'Laredo', 30, '$150,000'],
+      ['Frankie Long', 'Industrial Analyst', 'Austin', 31, '$170,000'],
+      ['Brynn Robbins', 'Business Analyst', 'Norfolk', 22, '$90,000'],
+      ['Justice Mann', 'Business Consultant', 'Chicago', 24, '$133,000'],
+      ['Addison Navarro', 'Business Management Analyst', 'New York', 50, '$295,000'],
+      ['Jesse Welch', 'Agency Legal Counsel', 'Seattle', 28, '$200,000'],
+      ['Eli Mejia', 'Commercial Specialist', 'Long Beach', 65, '$400,000'],
+      ['Gene Leblanc', 'Industrial Analyst', 'Hartford', 34, '$110,000'],
+      ['Danny Leon', 'Computer Scientist', 'Newark', 60, '$220,000'],
+      ['Lane Lee', 'Corporate Counselor', 'Cincinnati', 52, '$180,000'],
+      ['Jesse Hall', 'Business Analyst', 'Baltimore', 44, '$99,000'],
+      ['Danni Hudson', 'Agency Legal Counsel', 'Tampa', 37, '$90,000'],
+      ['Terry Macdonald', 'Commercial Specialist', 'Miami', 39, '$140,000'],
+      ['Justice Mccarthy', 'Attorney', 'Tucson', 26, '$330,000'],
+      ['Silver Carey', 'Computer Scientist', 'Memphis', 47, '$250,000'],
+      ['Franky Miles', 'Industrial Analyst', 'Buffalo', 49, '$190,000'],
+      ['Glen Nixon', 'Corporate Counselor', 'Arlington', 44, '$80,000'],
+      ['Gabby Strickland', 'Business Process Consultant', 'Scottsdale', 26, '$45,000'],
+      ['Mason Ray', 'Computer Scientist', 'San Francisco', 39, '$142,000']
+    ]
+  }
+  render() {
+    const { columns, data } = this.state;
+    const options = {
+      filterType: 'dropdown',
+      responsive: 'stacked',
+      print: true,
+      rowsPerPage: 10,
+      page: 1
+    };
+    return (
+      <MUIDataTable
+        title="Employee list"
+        data={data}
+        columns={columns}
+        options={options}
+      />
+    );
+  }
+}
+
+export default AdvFilter;
diff --git a/front/odiparpack/app/containers/Tables/demos/AdvTableDemo.js b/front/odiparpack/app/containers/Tables/demos/AdvTableDemo.js
new file mode 100644
index 0000000..d67990d
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/AdvTableDemo.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import { AdvTable } from 'ba-components';
+
+let counter = 0;
+function createData(name, calories, fat, carbs, protein) {
+  counter += 1;
+  return {
+    id: counter,
+    name,
+    calories,
+    fat,
+    carbs,
+    protein
+  };
+}
+
+class AdvTableDemo extends React.Component {
+  state = {
+    order: 'asc',
+    orderBy: 'calories',
+    selected: [],
+    columnData: [
+      {
+        id: 'name',
+        numeric: false,
+        disablePadding: true,
+        label: 'Dessert (100g serving)'
+      }, {
+        id: 'calories',
+        numeric: true,
+        disablePadding: false,
+        label: 'Calories'
+      }, {
+        id: 'fat',
+        numeric: true,
+        disablePadding: false,
+        label: 'Fat (g)'
+      }, {
+        id: 'carbs',
+        numeric: true,
+        disablePadding: false,
+        label: 'Carbs (g)'
+      }, {
+        id: 'protein',
+        numeric: true,
+        disablePadding: false,
+        label: 'Protein (g)'
+      },
+    ],
+    data: [
+      createData('Cupcake', 305, 3.7, 67, 4.3),
+      createData('Donut', 452, 25.0, 51, 4.9),
+      createData('Eclair', 262, 16.0, 24, 6.0),
+      createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+      createData('Gingerbread', 356, 16.0, 49, 3.9),
+      createData('Honeycomb', 408, 3.2, 87, 6.5),
+      createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+      createData('Jelly Bean', 375, 0.0, 94, 0.0),
+      createData('KitKat', 518, 26.0, 65, 7.0),
+      createData('Lollipop', 392, 0.2, 98, 0.0),
+      createData('Marshmallow', 318, 0, 81, 2.0),
+      createData('Nougat', 360, 19.0, 9, 37.0),
+      createData('Oreo', 437, 18.0, 63, 4.0),
+    ].sort((a, b) => (a.calories < b.calories ? -1 : 1)),
+    page: 0,
+    rowsPerPage: 5,
+    defaultPerPage: 5,
+    filterText: '',
+  };
+
+  render() {
+    const {
+      order,
+      orderBy,
+      selected,
+      data,
+      page,
+      rowsPerPage,
+      defaultPerPage,
+      filterText,
+      columnData
+    } = this.state;
+
+    return (
+      <AdvTable
+        order={order}
+        orderBy={orderBy}
+        selected={selected}
+        data={data}
+        page={page}
+        rowsPerPage={rowsPerPage}
+        defaultPerPage={defaultPerPage}
+        filterText={filterText}
+        columnData={columnData}
+      />
+    );
+  }
+}
+
+
+export default AdvTableDemo;
diff --git a/front/odiparpack/app/containers/Tables/demos/BorderedTable.js b/front/odiparpack/app/containers/Tables/demos/BorderedTable.js
new file mode 100644
index 0000000..a01979d
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/BorderedTable.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import tableStyles from 'ba-styles/Table.scss';
+
+import {
+  Toolbar,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Paper,
+} from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+    overflowX: 'auto',
+  },
+  table: {
+    minWidth: 700,
+  },
+});
+
+let id = 0;
+function createData(name, calories, fat, carbs, protein) {
+  id += 1;
+  return {
+    id,
+    name,
+    calories,
+    fat,
+    carbs,
+    protein
+  };
+}
+
+const data = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+function BorderedTable(props) {
+  const { classes } = props;
+
+  return (
+    <Paper className={classes.root}>
+      <Toolbar>
+        <div className={classes.title}>
+          <Typography variant="h6">Nutrition</Typography>
+        </div>
+      </Toolbar>
+      <Table className={classNames(classes.table, tableStyles.bordered)}>
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell align="right">Calories</TableCell>
+            <TableCell align="right">Fat (g)</TableCell>
+            <TableCell align="right">Carbs (g)</TableCell>
+            <TableCell align="right">Protein (g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map(n => ([
+            <TableRow key={n.id}>
+              <TableCell>{n.name}</TableCell>
+              <TableCell align="right">{n.calories}</TableCell>
+              <TableCell align="right">{n.fat}</TableCell>
+              <TableCell align="right">{n.carbs}</TableCell>
+              <TableCell align="right">{n.protein}</TableCell>
+            </TableRow>
+          ])
+          )}
+        </TableBody>
+      </Table>
+    </Paper>
+  );
+}
+
+BorderedTable.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(BorderedTable);
diff --git a/front/odiparpack/app/containers/Tables/demos/CrudTableDemo.js b/front/odiparpack/app/containers/Tables/demos/CrudTableDemo.js
new file mode 100644
index 0000000..98a1868
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/CrudTableDemo.js
@@ -0,0 +1,220 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import {
+  fetchAction,
+  addAction,
+  removeAction,
+  updateAction,
+  editAction,
+  saveAction,
+  closeNotifAction,
+} from 'ba-actions/CrudTbActions';
+import { CrudTable, Notification } from 'ba-components';
+import { Paper } from '@material-ui/core';
+
+// Reducer Branch
+const branch = 'crudTableDemo';
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+const anchorTable = [
+  {
+    name: 'id',
+    label: 'Id',
+    type: 'static',
+    initialValue: '',
+    hidden: true
+  }, {
+    name: 'category',
+    label: 'Category',
+    type: 'selection',
+    initialValue: 'Electronics',
+    options: ['Electronics', 'Sporting Goods', 'Apparels', 'Other'],
+    width: '150',
+    hidden: false
+  }, {
+    name: 'price',
+    label: 'Price',
+    type: 'number',
+    initialValue: 0,
+    width: '100',
+    hidden: false
+  }, {
+    name: 'date',
+    label: 'Date Updated',
+    type: 'date',
+    initialValue: new Date(),
+    width: 'auto',
+    hidden: false
+  }, {
+    name: 'time',
+    label: 'Time Updated',
+    type: 'time',
+    initialValue: new Date(),
+    width: 'auto',
+    hidden: false
+  }, {
+    name: 'name',
+    label: 'Name',
+    type: 'text',
+    initialValue: '',
+    width: 'auto',
+    hidden: false
+  }, {
+    name: 'available',
+    label: 'Available',
+    type: 'toggle',
+    initialValue: true,
+    width: '100',
+    hidden: false
+  }, {
+    name: 'edited',
+    label: '',
+    type: 'static',
+    initialValue: '',
+    hidden: true
+  }, {
+    name: 'action',
+    label: 'Action',
+    type: 'static',
+    initialValue: '',
+    hidden: false
+  },
+];
+const dataApi = [
+  {
+    id: 1,
+    category: 'Sporting Goods',
+    price: '49.99',
+    date: '4/3/2018',
+    time: 'Tue Apr 03 2018 00:00:00 GMT+0700 (WIB)',
+    name: 'football',
+    available: true,
+    edited: false,
+  }, {
+    id: 2,
+    category: 'Other',
+    price: '9.99',
+    date: '4/2/2018',
+    time: 'Tue Apr 03 2018 00:00:00 GMT+0700 (WIB)',
+    name: 'baseball',
+    available: true,
+    edited: false,
+  }, {
+    id: 3,
+    category: 'Sporting Goods',
+    price: '29.99',
+    date: '4/1/2018',
+    time: 'Tue Apr 03 2018 00:00:00 GMT+0700 (WIB)',
+    name: 'basketball',
+    available: false,
+    edited: false,
+  }, {
+    id: 4,
+    category: 'Electronics',
+    price: '99.99',
+    date: '3/30/2018',
+    time: 'Tue Apr 03 2018 00:00:00 GMT+0700 (WIB)',
+    name: 'iPod Touch',
+    available: true,
+    edited: false,
+  }, {
+    id: 5,
+    category: 'Electronics',
+    price: '399.99',
+    date: '3/29/2018',
+    time: 'Tue Apr 03 2018 00:00:00 GMT+0700 (WIB)',
+    name: 'iPhone 5',
+    available: false,
+    edited: false,
+  }, {
+    id: 6,
+    category: 'Electronics',
+    price: '199.99',
+    date: '3/28/2018',
+    time: 'Tue Apr 03 2018 00:00:00 GMT+0700 (WIB)',
+    name: 'nexus 7',
+    available: true,
+    edited: false,
+  }
+];
+
+class CrudTableDemo extends Component {
+  render() {
+    const {
+      classes,
+      fetchData,
+      addEmptyRow,
+      dataTable,
+      removeRow,
+      updateRow,
+      editRow,
+      finishEditRow,
+      closeNotif,
+      messageNotif,
+    } = this.props;
+    return (
+      <div>
+        <Notification close={() => closeNotif(branch)} message={messageNotif} />
+        <Paper className={classes.root}>
+          <CrudTable
+            dataInit={dataApi}
+            anchor={anchorTable}
+            title="Inventory"
+            dataTable={dataTable}
+            fetchData={fetchData}
+            addEmptyRow={addEmptyRow}
+            removeRow={removeRow}
+            updateRow={updateRow}
+            editRow={editRow}
+            finishEditRow={finishEditRow}
+            branch={branch}
+          />
+        </Paper>
+      </div>
+    );
+  }
+}
+
+CrudTableDemo.propTypes = {
+  classes: PropTypes.object.isRequired,
+  fetchData: PropTypes.func.isRequired,
+  dataTable: PropTypes.object.isRequired,
+  addEmptyRow: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  updateRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  finishEditRow: PropTypes.func.isRequired,
+  closeNotif: PropTypes.func.isRequired,
+  messageNotif: PropTypes.string.isRequired,
+};
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  dataTable: state.getIn([branch, 'dataTable']),
+  messageNotif: state.getIn([branch, 'notifMsg']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  fetchData: bindActionCreators(fetchAction, dispatch),
+  addEmptyRow: bindActionCreators(addAction, dispatch),
+  removeRow: bindActionCreators(removeAction, dispatch),
+  updateRow: bindActionCreators(updateAction, dispatch),
+  editRow: bindActionCreators(editAction, dispatch),
+  finishEditRow: bindActionCreators(saveAction, dispatch),
+  closeNotif: bindActionCreators(closeNotifAction, dispatch),
+});
+
+const CrudTableMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CrudTableDemo);
+
+export default withStyles(styles)(CrudTableMapped);
diff --git a/front/odiparpack/app/containers/Tables/demos/CrudTbFormDemo.js b/front/odiparpack/app/containers/Tables/demos/CrudTbFormDemo.js
new file mode 100644
index 0000000..c20803e
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/CrudTbFormDemo.js
@@ -0,0 +1,230 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Field } from 'redux-form/immutable';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import {
+  CheckboxRedux,
+  SelectRedux,
+  TextFieldRedux,
+  SwitchRedux
+} from 'ba-components/Forms/ReduxFormMUI';
+import {
+  fetchAction,
+  addAction,
+  closeAction,
+  submitAction,
+  removeAction,
+  editAction,
+  closeNotifAction
+} from 'ba-actions/CrudTbFrmActions';
+import { CrudTableForm, Notification } from 'ba-components';
+import {
+  Paper,
+  MenuItem,
+  InputLabel,
+  Radio,
+  RadioGroup,
+  FormControl,
+  FormLabel,
+  FormControlLabel,
+} from '@material-ui/core';
+import { anchorTable, dataApi } from './sampleData';
+
+
+const branch = 'crudTbFrmDemo';
+
+const renderRadioGroup = ({ input, ...rest }) => (
+  <RadioGroup
+    {...input}
+    {...rest}
+    valueselected={input.value}
+    onChange={(event, value) => input.onChange(value)}
+  />
+);
+
+// validation functions
+const required = value => (value == null ? 'Required' : undefined);
+const email = value => (
+  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
+    ? 'Invalid email'
+    : undefined
+);
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  },
+  field: {
+    width: '100%',
+    marginBottom: 20
+  },
+  fieldBasic: {
+    width: '100%',
+    marginBottom: 20,
+    marginTop: 10
+  },
+  inlineWrap: {
+    display: 'flex',
+    flexDirection: 'row'
+  }
+});
+
+class CrudTbFormDemo extends Component {
+  saveRef = ref => {
+    this.ref = ref;
+    return this.ref;
+  };
+
+  render() {
+    const {
+      classes,
+      fetchData,
+      addNew,
+      closeForm,
+      submit,
+      removeRow,
+      editRow,
+      dataTable,
+      openForm,
+      initValues,
+      closeNotif,
+      messageNotif,
+    } = this.props;
+    const trueBool = true;
+    return (
+      <div>
+        <Notification close={() => closeNotif(branch)} message={messageNotif} />
+        <Paper className={classes.root}>
+          <CrudTableForm
+            dataTable={dataTable}
+            openForm={openForm}
+            dataInit={dataApi}
+            anchor={anchorTable}
+            title="Title of Table"
+            fetchData={fetchData}
+            addNew={addNew}
+            closeForm={closeForm}
+            submit={submit}
+            removeRow={removeRow}
+            editRow={editRow}
+            branch={branch}
+            initValues={initValues}
+          >
+            {/* Create Your own form, then arrange or custom it as You like */}
+            <div>
+              <Field
+                name="text"
+                component={TextFieldRedux}
+                placeholder="Text Field"
+                label="Text Field"
+                validate={required}
+                required
+                ref={this.saveRef}
+                className={classes.field}
+              />
+            </div>
+            <div>
+              <Field
+                name="email"
+                component={TextFieldRedux}
+                placeholder="Email Field"
+                label="Email"
+                required
+                validate={[required, email]}
+                className={classes.field}
+              />
+            </div>
+            <div className={classes.fieldBasic}>
+              <FormLabel component="label">Choose One Option</FormLabel>
+              <Field name="radio" className={classes.inlineWrap} component={renderRadioGroup}>
+                <FormControlLabel value="option1" control={<Radio />} label="Option 1" />
+                <FormControlLabel value="option2" control={<Radio />} label="Option 2" />
+              </Field>
+            </div>
+            <div>
+              <FormControl className={classes.field}>
+                <InputLabel htmlFor="selection">Selection</InputLabel>
+                <Field
+                  name="selection"
+                  component={SelectRedux}
+                  placeholder="Selection"
+                  autoWidth={trueBool}
+                >
+                  <MenuItem value="option1">Option One</MenuItem>
+                  <MenuItem value="option2">Option Two</MenuItem>
+                  <MenuItem value="option3">Option Three</MenuItem>
+                </Field>
+              </FormControl>
+            </div>
+            <div className={classes.fieldBasic}>
+              <FormLabel component="label">Toggle Input</FormLabel>
+              <div className={classes.inlineWrap}>
+                <FormControlLabel control={<Field name="onof" component={SwitchRedux} />} label="On/OF Switch" />
+                <FormControlLabel control={<Field name="checkbox" component={CheckboxRedux} />} label="Checkbox" />
+              </div>
+            </div>
+            <div className={classes.field}>
+              <Field
+                name="textarea"
+                className={classes.field}
+                component={TextFieldRedux}
+                placeholder="Textarea"
+                label="Textarea"
+                multiline={trueBool}
+                rows={4}
+              />
+            </div>
+            {/* No need create button or submit, because that already made in this component */}
+          </CrudTableForm>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+renderRadioGroup.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+
+CrudTbFormDemo.propTypes = {
+  dataTable: PropTypes.object.isRequired,
+  openForm: PropTypes.bool.isRequired,
+  classes: PropTypes.object.isRequired,
+  fetchData: PropTypes.func.isRequired,
+  addNew: PropTypes.func.isRequired,
+  closeForm: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  initValues: PropTypes.object.isRequired,
+  closeNotif: PropTypes.func.isRequired,
+  messageNotif: PropTypes.string.isRequired,
+};
+
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  initValues: state.getIn([branch, 'formValues']),
+  dataTable: state.getIn([branch, 'dataTable']),
+  openForm: state.getIn([branch, 'showFrm']),
+  messageNotif: state.getIn([branch, 'notifMsg']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  fetchData: bindActionCreators(fetchAction, dispatch),
+  addNew: bindActionCreators(addAction, dispatch),
+  closeForm: bindActionCreators(closeAction, dispatch),
+  submit: bindActionCreators(submitAction, dispatch),
+  removeRow: bindActionCreators(removeAction, dispatch),
+  editRow: bindActionCreators(editAction, dispatch),
+  closeNotif: bindActionCreators(closeNotifAction, dispatch),
+});
+
+const CrudTbFormDemoMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CrudTbFormDemo);
+
+export default withStyles(styles)(CrudTbFormDemoMapped);
diff --git a/front/odiparpack/app/containers/Tables/demos/EmptyTable.js b/front/odiparpack/app/containers/Tables/demos/EmptyTable.js
new file mode 100644
index 0000000..c9517a2
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/EmptyTable.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { EmptyData } from 'ba-components';
+
+import { Toolbar, Typography, Table, TableCell, TableHead, TableRow, Paper } from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+    overflowX: 'auto',
+  },
+  table: {
+    minWidth: 700,
+  },
+});
+
+function EmptyTable(props) {
+  const { classes } = props;
+  return (
+    <Paper className={classes.root}>
+      <Toolbar>
+        <div className={classes.title}>
+          <Typography variant="h6">Nutrition</Typography>
+        </div>
+      </Toolbar>
+      <Table className={classes.table}>
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell align="right">Calories</TableCell>
+            <TableCell align="right">Fat (g)</TableCell>
+            <TableCell align="right">Carbs (g)</TableCell>
+            <TableCell align="right">Protein (g)</TableCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+      <EmptyData />
+    </Paper>
+  );
+}
+
+EmptyTable.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(EmptyTable);
diff --git a/front/odiparpack/app/containers/Tables/demos/HoverTable.js b/front/odiparpack/app/containers/Tables/demos/HoverTable.js
new file mode 100644
index 0000000..48047c6
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/HoverTable.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import tableStyles from 'ba-styles/Table.scss';
+
+import {
+  Toolbar,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Paper,
+} from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+    overflowX: 'auto',
+  },
+  table: {
+    minWidth: 700,
+  },
+});
+
+let id = 0;
+function createData(name, calories, fat, carbs, protein) {
+  id += 1;
+  return {
+    id,
+    name,
+    calories,
+    fat,
+    carbs,
+    protein
+  };
+}
+
+const data = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+function HoverTable(props) {
+  const { classes } = props;
+
+  return (
+    <Paper className={classes.root}>
+      <Toolbar>
+        <div className={classes.title}>
+          <Typography variant="h6">Nutrition</Typography>
+        </div>
+      </Toolbar>
+      <Table className={classNames(classes.table, tableStyles.hover)}>
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell align="right">Calories</TableCell>
+            <TableCell align="right">Fat (g)</TableCell>
+            <TableCell align="right">Carbs (g)</TableCell>
+            <TableCell align="right">Protein (g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map(n => ([
+            <TableRow key={n.id}>
+              <TableCell>{n.name}</TableCell>
+              <TableCell align="right">{n.calories}</TableCell>
+              <TableCell align="right">{n.fat}</TableCell>
+              <TableCell align="right">{n.carbs}</TableCell>
+              <TableCell align="right">{n.protein}</TableCell>
+            </TableRow>
+          ])
+          )}
+        </TableBody>
+      </Table>
+    </Paper>
+  );
+}
+
+HoverTable.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(HoverTable);
diff --git a/front/odiparpack/app/containers/Tables/demos/SimpleTable.js b/front/odiparpack/app/containers/Tables/demos/SimpleTable.js
new file mode 100644
index 0000000..e064d5e
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/SimpleTable.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+
+import {
+  Toolbar,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Paper,
+} from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+    overflowX: 'auto',
+  },
+  table: {
+    minWidth: 700,
+  },
+});
+
+let id = 0;
+function createData(name, calories, fat, carbs, protein) {
+  id += 1;
+  return {
+    id,
+    name,
+    calories,
+    fat,
+    carbs,
+    protein
+  };
+}
+
+const data = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+function SimpleTable(props) {
+  const { classes } = props;
+  return (
+    <Paper className={classes.root}>
+      <Toolbar>
+        <div className={classes.title}>
+          <Typography variant="h6">Nutrition</Typography>
+        </div>
+      </Toolbar>
+      <Table className={classes.table}>
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell align="right">Calories</TableCell>
+            <TableCell align="right">Fat (g)</TableCell>
+            <TableCell align="right">Carbs (g)</TableCell>
+            <TableCell align="right">Protein (g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map(n => ([
+            <TableRow key={n.id}>
+              <TableCell>{n.name}</TableCell>
+              <TableCell align="right">{n.calories}</TableCell>
+              <TableCell align="right">{n.fat}</TableCell>
+              <TableCell align="right">{n.carbs}</TableCell>
+              <TableCell align="right">{n.protein}</TableCell>
+            </TableRow>
+          ])
+          )}
+        </TableBody>
+      </Table>
+    </Paper>
+  );
+}
+
+SimpleTable.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimpleTable);
diff --git a/front/odiparpack/app/containers/Tables/demos/StatusColorRow.js b/front/odiparpack/app/containers/Tables/demos/StatusColorRow.js
new file mode 100644
index 0000000..2e21190
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/StatusColorRow.js
@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import messageStyles from 'ba-styles/Messages.scss';
+import progressStyles from 'ba-styles/Progress.scss';
+
+import {
+  Toolbar,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Paper,
+  Chip,
+  LinearProgress,
+} from '@material-ui/core';
+
+const CustomTableCell = withStyles(theme => ({
+  head: {
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.common.white,
+  },
+  body: {
+    fontSize: 14,
+  },
+}))(TableCell);
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+    overflowX: 'auto',
+  },
+  chip: {
+    margin: theme.spacing(1),
+    fontWeight: 500,
+    color: '#FFF'
+  },
+});
+
+let id = 0;
+function createData(name, progress, status) {
+  id += 1;
+  return {
+    id,
+    name,
+    progress,
+    status,
+  };
+}
+
+const data = [
+  createData('Frozen yoghurt', 24, 'Error'),
+  createData('Ice cream sandwich', 37, 'Warning'),
+  createData('Eclair', 24, 'Info'),
+  createData('Cupcake', 67, 'Default'),
+  createData('Gingerbread', 89, 'Success'),
+];
+
+function StatusLabel(props) {
+  const { classes } = props;
+  const getStatus = status => {
+    switch (status) {
+      case 'Error': return messageStyles.bgError;
+      case 'Warning': return messageStyles.bgWarning;
+      case 'Info': return messageStyles.bgInfo;
+      case 'Success': return messageStyles.bgSuccess;
+      default: return messageStyles.bgDefault;
+    }
+  };
+  const getProgress = status => {
+    switch (status) {
+      case 'Error': return progressStyles.bgError;
+      case 'Warning': return progressStyles.bgWarning;
+      case 'Info': return progressStyles.bgInfo;
+      case 'Success': return progressStyles.bgSuccess;
+      default: return progressStyles.bgDefault;
+    }
+  };
+  return (
+    <Paper className={classes.root}>
+      <Toolbar>
+        <div className={classes.title}>
+          <Typography variant="h6">Nutrition</Typography>
+        </div>
+      </Toolbar>
+      <Table className={classes.table}>
+        <TableHead>
+          <TableRow>
+            <CustomTableCell>Dessert (100g serving)</CustomTableCell>
+            <CustomTableCell>Progress</CustomTableCell>
+            <CustomTableCell>Status</CustomTableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map(n => ([
+            <TableRow key={n.id} className={getStatus(n.status)}>
+              <TableCell>{n.name}</TableCell>
+              <TableCell align="right">
+                <LinearProgress variant="determinate" className={getProgress(n.status)} value={n.progress} />
+              </TableCell>
+              <TableCell>
+                <Chip label={n.status} className={classNames(classes.chip, getStatus(n.status))} />
+              </TableCell>
+            </TableRow>
+          ])
+          )}
+        </TableBody>
+      </Table>
+    </Paper>
+  );
+}
+
+StatusLabel.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(StatusLabel);
diff --git a/front/odiparpack/app/containers/Tables/demos/StatusLabel.js b/front/odiparpack/app/containers/Tables/demos/StatusLabel.js
new file mode 100644
index 0000000..bf011dd
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/StatusLabel.js
@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import tableStyles from 'ba-styles/Table.scss';
+import messageStyles from 'ba-styles/Messages.scss';
+import progressStyles from 'ba-styles/Progress.scss';
+
+import {
+  Toolbar,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Paper,
+  Chip,
+  LinearProgress,
+} from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+    overflowX: 'auto',
+  },
+  chip: {
+    margin: theme.spacing(1),
+    fontWeight: 'bold',
+    color: '#FFF'
+  },
+});
+
+let id = 0;
+function createData(name, progress, status) {
+  id += 1;
+  return {
+    id,
+    name,
+    progress,
+    status,
+  };
+}
+
+const data = [
+  createData('Frozen yoghurt', 24, 'Error'),
+  createData('Ice cream sandwich', 37, 'Warning'),
+  createData('Eclair', 24, 'Info'),
+  createData('Cupcake', 67, 'Default'),
+  createData('Gingerbread', 89, 'Success'),
+];
+
+function StatusLabel(props) {
+  const { classes } = props;
+  const getStatus = status => {
+    switch (status) {
+      case 'Error': return messageStyles.bgError;
+      case 'Warning': return messageStyles.bgWarning;
+      case 'Info': return messageStyles.bgInfo;
+      case 'Success': return messageStyles.bgSuccess;
+      default: return messageStyles.bgDefault;
+    }
+  };
+  const getProgress = status => {
+    switch (status) {
+      case 'Error': return progressStyles.bgError;
+      case 'Warning': return progressStyles.bgWarning;
+      case 'Info': return progressStyles.bgInfo;
+      case 'Success': return progressStyles.bgSuccess;
+      default: return progressStyles.bgDefault;
+    }
+  };
+  return (
+    <Paper className={classes.root}>
+      <Toolbar>
+        <div className={classes.title}>
+          <Typography variant="h6">Nutrition</Typography>
+        </div>
+      </Toolbar>
+      <Table className={classNames(classes.table, tableStyles.stripped)}>
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell>Progress</TableCell>
+            <TableCell>Status</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map(n => ([
+            <TableRow key={n.id}>
+              <TableCell>{n.name}</TableCell>
+              <TableCell align="right">
+                <LinearProgress variant="determinate" className={getProgress(n.status)} value={n.progress} />
+              </TableCell>
+              <TableCell>
+                <Chip label={n.status} className={classNames(classes.chip, getStatus(n.status))} />
+              </TableCell>
+            </TableRow>
+          ])
+          )}
+        </TableBody>
+      </Table>
+    </Paper>
+  );
+}
+
+StatusLabel.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(StatusLabel);
diff --git a/front/odiparpack/app/containers/Tables/demos/StrippedTable.js b/front/odiparpack/app/containers/Tables/demos/StrippedTable.js
new file mode 100644
index 0000000..509bc4a
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/StrippedTable.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import tableStyles from 'ba-styles/Table.scss';
+
+import {
+  Toolbar,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Paper,
+} from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+    overflowX: 'auto',
+  },
+  table: {
+    minWidth: 700,
+  },
+});
+
+let id = 0;
+function createData(name, calories, fat, carbs, protein) {
+  id += 1;
+  return {
+    id,
+    name,
+    calories,
+    fat,
+    carbs,
+    protein
+  };
+}
+
+const data = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+function StrippedTable(props) {
+  const { classes } = props;
+
+  return (
+    <Paper className={classes.root}>
+      <Toolbar>
+        <div className={classes.title}>
+          <Typography variant="h6">Nutrition</Typography>
+        </div>
+      </Toolbar>
+      <Table className={classNames(classes.table, tableStyles.stripped)}>
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell align="right">Calories</TableCell>
+            <TableCell align="right">Fat (g)</TableCell>
+            <TableCell align="right">Carbs (g)</TableCell>
+            <TableCell align="right">Protein (g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map(n => ([
+            <TableRow key={n.id}>
+              <TableCell>{n.name}</TableCell>
+              <TableCell align="right">{n.calories}</TableCell>
+              <TableCell align="right">{n.fat}</TableCell>
+              <TableCell align="right">{n.carbs}</TableCell>
+              <TableCell align="right">{n.protein}</TableCell>
+            </TableRow>
+          ])
+          )}
+        </TableBody>
+      </Table>
+    </Paper>
+  );
+}
+
+StrippedTable.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(StrippedTable);
diff --git a/front/odiparpack/app/containers/Tables/demos/TrackingTable.js b/front/odiparpack/app/containers/Tables/demos/TrackingTable.js
new file mode 100644
index 0000000..0550869
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/TrackingTable.js
@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import messageStyles from 'ba-styles/Messages.scss';
+import progressStyles from 'ba-styles/Progress.scss';
+import avatarApi from 'ba-api/avatars';
+import { PapperBlock } from 'ba-components';
+import styles from 'ba-components/Widget/widget-jss';
+
+import {
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Chip,
+  LinearProgress,
+  Avatar,
+  Icon,
+} from '@material-ui/core';
+
+let id = 0;
+function createData(name, avatar, title, type, taskNumber, taskTitle, progress, status) {
+  id += 1;
+  return {
+    id,
+    name,
+    avatar,
+    title,
+    type,
+    taskNumber,
+    taskTitle,
+    progress,
+    status,
+  };
+}
+
+const data = [
+  createData('John Doe', avatarApi[6], 'Front End Developer', 'bug_report', 2214, 'Vivamus sit amet interdum elit', 30, 'Error'),
+  createData('Jim Doe', avatarApi[8], 'System Analyst', 'flag', 2455, 'Nam sollicitudin dignissim nunc', 70, 'Success'),
+  createData('Jane Doe', avatarApi[2], 'Back End Developer', 'whatshot', 3450, 'Quisque ut metus sit amet augue rutrum', 50, 'Warning'),
+  createData('Jack Doe', avatarApi[9], 'CTO', 'settings', 4905, 'Cras convallis lacus orci', 85, 'Info'),
+  createData('Jessica Doe', avatarApi[5], 'Project Manager', 'book', 4118, 'Aenean sit amet magna vel magna', 33, 'Default'),
+];
+
+function TrackingTable(props) {
+  const { classes } = props;
+  const getStatus = status => {
+    switch (status) {
+      case 'Error': return messageStyles.bgError;
+      case 'Warning': return messageStyles.bgWarning;
+      case 'Info': return messageStyles.bgInfo;
+      case 'Success': return messageStyles.bgSuccess;
+      default: return messageStyles.bgDefault;
+    }
+  };
+  const getProgress = status => {
+    switch (status) {
+      case 'Error': return progressStyles.bgError;
+      case 'Warning': return progressStyles.bgWarning;
+      case 'Info': return progressStyles.bgInfo;
+      case 'Success': return progressStyles.bgSuccess;
+      default: return progressStyles.bgDefault;
+    }
+  };
+  const getType = type => {
+    switch (type) {
+      case 'bug_report': return classes.red;
+      case 'flag': return classes.indigo;
+      case 'whatshot': return classes.orange;
+      case 'settings': return classes.lime;
+      default: return classes.purple;
+    }
+  };
+  return (
+    <PapperBlock title="Team Progress" whiteBg desc="Monitoring Your Team progress. Tracking task, current progress, and task status here.">
+      <div className={classes.root}>
+        <Table className={classNames(classes.table)}>
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell>Task</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {data.map(n => ([
+              <TableRow key={n.id}>
+                <TableCell>
+                  <div className={classes.user}>
+                    <Avatar alt={n.name} src={n.avatar} className={classes.avatar} />
+                    <div>
+                      <Typography variant="subtitle1">{n.name}</Typography>
+                      <Typography>{n.title}</Typography>
+                    </div>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <div className={classes.taskStatus}>
+                    <Icon className={classNames(classes.taskIcon, getType(n.type))}>{n.type}</Icon>
+                    <a href="#">
+#
+                      {n.taskNumber}
+                    </a>
+                    <Chip label={n.status} className={classNames(classes.chip, getStatus(n.status))} />
+                  </div>
+                  <LinearProgress variant="determinate" className={getProgress(n.status)} value={n.progress} />
+                </TableCell>
+              </TableRow>
+            ])
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </PapperBlock>
+  );
+}
+
+TrackingTable.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(TrackingTable);
diff --git a/front/odiparpack/app/containers/Tables/demos/TreeTableDemo.js b/front/odiparpack/app/containers/Tables/demos/TreeTableDemo.js
new file mode 100644
index 0000000..4c522e2
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/TreeTableDemo.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import openAction from 'ba-actions/TreeTableActions';
+import { TreeTable } from 'ba-components';
+import { Paper } from '@material-ui/core';
+import data from './dataTreeTable.js';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+    overflowX: 'auto',
+  },
+});
+
+const branch = 'treeTableArrow';
+
+class TreeTableDemo extends Component {
+  render() {
+    const {
+      arrowMore,
+      treeOpen,
+      classes,
+      toggleTree
+    } = this.props;
+    return (
+      <div>
+        <Paper className={classes.root}>
+          <TreeTable
+            treeOpen={treeOpen}
+            toggleTree={toggleTree}
+            arrowMore={arrowMore}
+            dataTable={data}
+            branch={branch}
+            icon="arrow"
+          />
+        </Paper>
+      </div>
+    );
+  }
+}
+
+TreeTableDemo.propTypes = {
+  classes: PropTypes.object.isRequired,
+  treeOpen: PropTypes.object.isRequired,
+  arrowMore: PropTypes.object.isRequired,
+  toggleTree: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  treeOpen: state.getIn([branch, 'treeOpen']),
+  arrowMore: state.getIn([branch, 'arrowMore']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  toggleTree: bindActionCreators(openAction, dispatch)
+});
+
+const TreeTableDemoMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TreeTableDemo);
+
+export default withStyles(styles)(TreeTableDemoMapped);
diff --git a/front/odiparpack/app/containers/Tables/demos/TreeTableDemoIcon.js b/front/odiparpack/app/containers/Tables/demos/TreeTableDemoIcon.js
new file mode 100644
index 0000000..d669fae
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/TreeTableDemoIcon.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import openAction from 'ba-actions/TreeTableActions';
+import { TreeTable } from 'ba-components';
+import { Paper } from '@material-ui/core';
+import data from './dataTreeTable.js';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+    overflowX: 'auto',
+  },
+});
+
+const branch = 'treeTablePM';
+
+class TreeTableDemoIcon extends Component {
+  render() {
+    const {
+      arrowMore,
+      treeOpen,
+      classes,
+      toggleTree
+    } = this.props;
+    return (
+      <div>
+        <Paper className={classes.root}>
+          <TreeTable
+            treeOpen={treeOpen}
+            toggleTree={toggleTree}
+            arrowMore={arrowMore}
+            dataTable={data}
+            branch={branch}
+            icon="plusminus"
+          />
+        </Paper>
+      </div>
+    );
+  }
+}
+
+TreeTableDemoIcon.propTypes = {
+  classes: PropTypes.object.isRequired,
+  treeOpen: PropTypes.object.isRequired,
+  arrowMore: PropTypes.object.isRequired,
+  toggleTree: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  treeOpen: state.getIn([branch, 'treeOpen']),
+  arrowMore: state.getIn([branch, 'arrowMore']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  toggleTree: bindActionCreators(openAction, dispatch)
+});
+
+const TreeTableIconMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TreeTableDemoIcon);
+
+export default withStyles(styles)(TreeTableIconMapped);
diff --git a/front/odiparpack/app/containers/Tables/demos/dataTreeTable.js b/front/odiparpack/app/containers/Tables/demos/dataTreeTable.js
new file mode 100644
index 0000000..2eba8ab
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/dataTreeTable.js
@@ -0,0 +1,128 @@
+module.exports = {
+  head: [
+    {
+      label: 'KeyId',
+    },
+    {
+      label: 'Dessert (100g serving)',
+    },
+    {
+      label: 'Calories',
+    },
+    {
+      label: 'Fat(g)',
+    }
+  ],
+  body: [
+    {
+      id: '1',
+      name: 'Frozen yoghurt',
+      calories: 159,
+      fat: 24,
+      child: [
+        {
+          id: '1_1',
+          name: 'Frozen child 1',
+          calories: 159,
+          fat: 24,
+        },
+        {
+          id: '1_2',
+          name: 'Frozen child 2',
+          calories: 159,
+          fat: 24,
+          child: [
+            {
+              id: '1_2_1',
+              name: 'Frozen grand child 1',
+              calories: 159,
+              fat: 24,
+            },
+          ]
+        },
+      ]
+    },
+    {
+      id: '2',
+      name: 'Eclair',
+      calories: 159,
+      fat: 24,
+      child: [
+        {
+          id: '2_1',
+          name: 'Eclair Child',
+          calories: 159,
+          fat: 24,
+          child: [
+            {
+              id: '2_1_1',
+              name: 'Eclair Grand Child 1',
+              calories: 159,
+              fat: 24,
+            },
+            {
+              id: '2_1_2',
+              name: 'Eclair Grand Child 2',
+              calories: 159,
+              fat: 24,
+            }
+          ]
+        },
+      ]
+    },
+    {
+      id: '3',
+      name: 'Cupcake',
+      calories: 159,
+      fat: 24,
+    },
+    {
+      id: '4',
+      name: 'Ginger Bread',
+      calories: 159,
+      fat: 24,
+      child: [
+        {
+          id: '4_1',
+          name: 'Ginger Bread Child',
+          calories: 159,
+          fat: 24,
+          child: [
+            {
+              id: '4_1_1',
+              name: 'Ginger Bread Grand Child 1',
+              calories: 159,
+              fat: 24,
+              child: [
+                {
+                  id: '4_1_1_1',
+                  name: 'Ginger Bread Super Grand Child 1',
+                  calories: 159,
+                  fat: 24,
+                },
+                {
+                  id: '4_1_1_2',
+                  name: 'Ginger Bread Super Grand Child 2',
+                  calories: 159,
+                  fat: 24,
+                },
+              ]
+            },
+            {
+              id: '4_1_2',
+              name: 'Ginger Bread Grand Child 2',
+              calories: 159,
+              fat: 24,
+            },
+            {
+              id: '4_1_3',
+              name: 'Ginger Bread Grand Child 3',
+              calories: 159,
+              fat: 24,
+            }
+          ]
+        },
+      ]
+    }
+  ]
+};
diff --git a/front/odiparpack/app/containers/Tables/demos/index.js b/front/odiparpack/app/containers/Tables/demos/index.js
new file mode 100644
index 0000000..604e828
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/index.js
@@ -0,0 +1,14 @@
+export SimpleTable from './SimpleTable';
+export StrippedTable from './StrippedTable';
+export HoverTable from './HoverTable';
+export BorderedTable from './BorderedTable';
+export TreeTableDemo from './TreeTableDemo';
+export TreeTableDemoIcon from './TreeTableDemoIcon';
+export CrudTableDemo from './CrudTableDemo';
+export CrudTbFormDemo from './CrudTbFormDemo';
+export AdvTableDemo from './AdvTableDemo';
+export AdvFilter from './AdvFilter';
+export StatusLabel from './StatusLabel';
+export StatusColorRow from './StatusColorRow';
+export EmptyTable from './EmptyTable';
+export TrackingTable from './TrackingTable';
diff --git a/front/odiparpack/app/containers/Tables/demos/sampleData.js b/front/odiparpack/app/containers/Tables/demos/sampleData.js
new file mode 100644
index 0000000..d53d8e2
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/sampleData.js
@@ -0,0 +1,124 @@
+export const anchorTable = [
+  {
+    name: 'id',
+    label: 'Id',
+    initialValue: '',
+    hidden: true
+  }, {
+    name: 'text',
+    label: 'Text Field',
+    initialValue: null,
+    width: 'auto',
+    hidden: false
+  }, {
+    name: 'email',
+    label: 'Email Field',
+    initialValue: null,
+    width: 'auto',
+    hidden: false
+  }, {
+    name: 'radio',
+    label: 'Radio Option',
+    initialValue: 'option1',
+    width: '80',
+    hidden: false
+  }, {
+    name: 'selection',
+    label: 'Selection',
+    initialValue: 'option1',
+    width: '80',
+    hidden: false
+  }, {
+    name: 'onof',
+    label: 'On/Of Input',
+    initialValue: true,
+    width: '80',
+    hidden: false
+  }, {
+    name: 'checkbox',
+    label: 'Checkbox',
+    initialValue: true,
+    width: '80',
+    hidden: false
+  }, {
+    name: 'textarea',
+    label: 'Text Area',
+    initialValue: 'This is default text',
+    width: 'auto',
+    hidden: false
+  }, {
+    name: 'edited',
+    label: '',
+    initialValue: '',
+    hidden: true
+  }, {
+    name: 'action',
+    label: 'Action',
+    initialValue: '',
+    hidden: false
+  },
+];
+
+export const dataApi = [
+  {
+    id: '1',
+    text: 'Just write',
+    email: '[email protected]',
+    radio: 'option2',
+    selection: 'option1',
+    onof: false,
+    checkbox: true,
+    textarea: 'Lorem ipsum dolor sit amet',
+    edited: false,
+  }, {
+    id: '2',
+    text: 'Some text',
+    email: '[email protected]',
+    radio: 'option2',
+    selection: 'option2',
+    onof: false,
+    checkbox: false,
+    textarea: 'Lorem ipsum dolor sit amet',
+    edited: false,
+  }, {
+    id: '3',
+    text: 'Because it is a TextField',
+    email: '[email protected]',
+    radio: 'option1',
+    selection: 'option3',
+    onof: false,
+    checkbox: false,
+    textarea: 'Lorem ipsum dolor sit amet',
+    edited: false,
+  }, {
+    id: '4',
+    text: 'And editable',
+    email: '[email protected]',
+    radio: 'option1',
+    selection: 'option1',
+    onof: false,
+    checkbox: true,
+    textarea: 'Lorem ipsum dolor sit amet',
+    edited: false,
+  }, {
+    id: '5',
+    text: 'You can write',
+    email: '[email protected]',
+    radio: 'option2',
+    selection: 'option2',
+    onof: false,
+    checkbox: true,
+    textarea: 'Lorem ipsum dolor sit amet',
+    edited: false,
+  }, {
+    id: '6',
+    text: 'Everything You want here',
+    email: '[email protected]',
+    radio: 'option1',
+    selection: 'option3',
+    onof: false,
+    checkbox: false,
+    textarea: 'Lorem ipsum dolor sit amet',
+    edited: false,
+  },
+];