From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base para front
---
 .../app/containers/Tables/AdvancedTable.js         |  46 +++
 .../odiparpack/app/containers/Tables/BasicTable.js | 110 ++++++
 .../odiparpack/app/containers/Tables/CrudTable.js  |  57 +++
 .../app/containers/Tables/TablePlayground.js       | 419 +++++++++++++++++++++
 .../odiparpack/app/containers/Tables/TreeTable.js  |  60 +++
 .../app/containers/Tables/demos/AdvFilter.js       |  64 ++++
 .../app/containers/Tables/demos/AdvTableDemo.js    | 101 +++++
 .../app/containers/Tables/demos/BorderedTable.js   |  91 +++++
 .../app/containers/Tables/demos/CrudTableDemo.js   | 220 +++++++++++
 .../app/containers/Tables/demos/CrudTbFormDemo.js  | 230 +++++++++++
 .../app/containers/Tables/demos/EmptyTable.js      |  48 +++
 .../app/containers/Tables/demos/HoverTable.js      |  91 +++++
 .../app/containers/Tables/demos/SimpleTable.js     |  88 +++++
 .../app/containers/Tables/demos/StatusColorRow.js  | 121 ++++++
 .../app/containers/Tables/demos/StatusLabel.js     | 112 ++++++
 .../app/containers/Tables/demos/StrippedTable.js   |  91 +++++
 .../app/containers/Tables/demos/TrackingTable.js   | 124 ++++++
 .../app/containers/Tables/demos/TreeTableDemo.js   |  68 ++++
 .../containers/Tables/demos/TreeTableDemoIcon.js   |  68 ++++
 .../app/containers/Tables/demos/dataTreeTable.js   | 128 +++++++
 .../app/containers/Tables/demos/index.js           |  14 +
 .../app/containers/Tables/demos/sampleData.js      | 124 ++++++
 22 files changed, 2475 insertions(+)
 create mode 100644 front/odiparpack/app/containers/Tables/AdvancedTable.js
 create mode 100644 front/odiparpack/app/containers/Tables/BasicTable.js
 create mode 100644 front/odiparpack/app/containers/Tables/CrudTable.js
 create mode 100644 front/odiparpack/app/containers/Tables/TablePlayground.js
 create mode 100644 front/odiparpack/app/containers/Tables/TreeTable.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/AdvFilter.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/AdvTableDemo.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/BorderedTable.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/CrudTableDemo.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/CrudTbFormDemo.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/EmptyTable.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/HoverTable.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/SimpleTable.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/StatusColorRow.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/StatusLabel.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/StrippedTable.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/TrackingTable.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/TreeTableDemo.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/TreeTableDemoIcon.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/dataTreeTable.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/index.js
 create mode 100644 front/odiparpack/app/containers/Tables/demos/sampleData.js

(limited to 'front/odiparpack/app/containers/Tables')

diff --git a/front/odiparpack/app/containers/Tables/AdvancedTable.js b/front/odiparpack/app/containers/Tables/AdvancedTable.js
new file mode 100644
index 0000000..4d1b60a
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/AdvancedTable.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { withStyles } from '@material-ui/core/styles';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { AdvTableDemo, AdvFilter } from './demos';
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class AdvancedTable extends Component {
+  render() {
+    const title = brand.name + ' - Table';
+    const description = brand.desc;
+    const docSrc = 'containers/Tables/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Basic Data Table" desc="This is default example from Material UI. It Demonstrates the use of Checkbox and clickable rows for selection, with a custom Toolbar. It uses the TableSortLabel component to help style column headings.">
+          <div>
+            <AdvTableDemo />
+            <SourceReader componentName={docSrc + 'AdvTableDemo.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Advanced Data Table" desc="It uses npm mui-datatables. It's easy to use, you just describe columns and data collection. After that it will magically build features such as filtering, viewing / hiding columns, exporting to CSV downloads, printing, and more.">
+          <div>
+            <AdvFilter />
+            <SourceReader componentName={docSrc + 'AdvFilter.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(AdvancedTable);
diff --git a/front/odiparpack/app/containers/Tables/BasicTable.js b/front/odiparpack/app/containers/Tables/BasicTable.js
new file mode 100644
index 0000000..a6f81e1
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/BasicTable.js
@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Markdown from 'react-markdown';
+import codeStyle from 'ba-styles/Code.scss';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Grid } from '@material-ui/core';
+import {
+  StrippedTable,
+  HoverTable,
+  BorderedTable,
+  TrackingTable,
+  StatusLabel,
+  StatusColorRow,
+  EmptyTable
+} from './demos';
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class BasicTable extends Component {
+  render() {
+    const { classes } = this.props;
+    const title = brand.name + ' - Table';
+    const description = brand.desc;
+    const docSrc = 'containers/Tables/demos/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Stripped Table" desc="They (allegedly) aid usability in reading tabular data by offering the user a coloured means of separating and differentiating rows from one another">
+          <div>
+            <Markdown className={codeStyle.codePre} source="Simply by ``` import tableStyles from 'ba-components/Table.scss'; ``` then add the classNames ``` tableStyles.stripped ```" />
+            <StrippedTable />
+            <SourceReader componentName={docSrc + 'StrippedTable.js'} />
+          </div>
+        </PapperBlock>
+        <div className={classes.root}>
+          <Grid container spacing={3}>
+            <Grid item md={6} xs={12}>
+              <PapperBlock title="Hover Table" desc="Hover tables is addition option that allows you to see what row you selected">
+                <div>
+                  <Markdown className={codeStyle.codePre} source="Simply by ``` import tableStyles from 'ba-components/Table.scss'; ``` then add the classNames ``` tableStyles.hover ```" />
+                  <HoverTable />
+                  <SourceReader componentName={docSrc + 'HoverTable.js'} />
+                </div>
+              </PapperBlock>
+            </Grid>
+            <Grid item md={6} xs={12}>
+              <PapperBlock title="Bordered Table" desc="Old is gold, here is old fashion bordered table, we tweaked it a bit so that the headings looks more prominent.">
+                <div>
+                  <Markdown className={codeStyle.codePre} source="Simply by ``` import tableStyles from 'ba-components/Table.scss'; ``` then add the classNames ``` tableStyles.bordered ```" />
+                  <BorderedTable />
+                  <SourceReader componentName={docSrc + 'BorderedTable.js'} />
+                </div>
+              </PapperBlock>
+            </Grid>
+          </Grid>
+        </div>
+        <div className={classes.root}>
+          <Grid container spacing={3}>
+            <Grid item md={6} xs={12}>
+              <PapperBlock title="Status Table with Label" desc="">
+                <div>
+                  <StatusLabel />
+                  <SourceReader componentName={docSrc + 'StatusLabel.js'} />
+                </div>
+              </PapperBlock>
+            </Grid>
+            <Grid item md={6} xs={12}>
+              <PapperBlock title="Coloured Row" desc="">
+                <div>
+                  <StatusColorRow />
+                  <SourceReader componentName={docSrc + 'StatusColorRow.js'} />
+                </div>
+              </PapperBlock>
+            </Grid>
+          </Grid>
+        </div>
+        <div className={classes.root}>
+          <TrackingTable />
+          <SourceReader componentName={docSrc + 'TrackingTable.js'} />
+        </div>
+        <PapperBlock title="Empty Table" desc="">
+          <div>
+            <EmptyTable />
+            <SourceReader componentName={docSrc + 'EmptyTable.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+BasicTable.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(BasicTable);
diff --git a/front/odiparpack/app/containers/Tables/CrudTable.js b/front/odiparpack/app/containers/Tables/CrudTable.js
new file mode 100644
index 0000000..7ee18dd
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/CrudTable.js
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { withStyles } from '@material-ui/core/styles';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Paper } from '@material-ui/core';
+import { CrudTableDemo, CrudTbFormDemo } from './demos';
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class CrudTablePage extends Component {
+  render() {
+    const title = brand.name + ' - Table';
+    const description = brand.desc;
+    const docSrc = 'containers/Tables/demos/';
+    const { classes } = this.props;
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="CRUD Table" desc="The CRUD Table supports editing features including creating, updating and deleting rows. The editing state contains information about rows currently being edited, changes applied to a particular row, and rows that have been deleted and created.">
+          <div>
+            <Paper className={classes.root}>
+              <CrudTableDemo />
+            </Paper>
+            <SourceReader componentName={docSrc + 'CrudTableDemo.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="CRUD Table with Redux Form" desc="In the CRUD Table Form mode allow You to create or edit via dedicated form(Redux Form). The design form itself inspired by Gmail with floating design and it can be expanded become popup mode">
+          <div>
+            <Paper className={classes.root}>
+              <CrudTbFormDemo />
+            </Paper>
+            <SourceReader componentName={docSrc + 'CrudTbFormDemo.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+CrudTablePage.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CrudTablePage);
diff --git a/front/odiparpack/app/containers/Tables/TablePlayground.js b/front/odiparpack/app/containers/Tables/TablePlayground.js
new file mode 100644
index 0000000..30382bb
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/TablePlayground.js
@@ -0,0 +1,419 @@
+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 EnhancedTableHead from 'ba-components/Tables/tableParts/TableHeader';
+import EnhancedTableToolbar from 'ba-components/Tables/tableParts/TableToolbar';
+import { PapperBlock } from 'ba-components';
+
+import {
+  Grid,
+  FormControl,
+  FormLabel,
+  FormControlLabel,
+  FormGroup,
+  RadioGroup,
+  Radio,
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  TablePagination,
+  Paper,
+  Checkbox,
+} from '@material-ui/core';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+    overflowX: 'auto',
+  },
+  demo: {
+    height: 240,
+  },
+  paper: {
+    padding: theme.spacing(2),
+    height: '100%',
+    backgroundColor: theme.palette.secondary.light,
+  },
+  control: {
+    padding: theme.spacing(2),
+  },
+  settings: {
+    padding: 30
+  },
+});
+
+let counter = 0;
+function createData(name, calories, fat, carbs, protein) {
+  counter += 1;
+  return {
+    id: counter,
+    name,
+    calories,
+    fat,
+    carbs,
+    protein
+  };
+}
+
+class InteractiveGrid extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      order: 'asc',
+      orderBy: 'calories',
+      selected: [],
+      columnData: [
+        {
+          id: 'name',
+          numeric: false,
+          disablePadding: false,
+          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: '',
+      size: 'medium',
+      bordered: false,
+      stripped: true,
+      hovered: false,
+      toolbar: true,
+      checkcell: false,
+      pagination: true
+    };
+  }
+
+  handleChangeRadio = key => (event, value) => {
+    this.setState({
+      [key]: value,
+    });
+  };
+
+  handleChangeCheck = name => event => {
+    this.setState({ [name]: event.target.checked });
+  };
+
+  handleRequestSort = (event, property) => {
+    const orderBy = property;
+    let order = 'desc';
+
+    if (this.state.orderBy === property && this.state.order === 'desc') {
+      order = 'asc';
+    }
+
+    const data = order === 'desc'
+      ? this.state.data.sort((a, b) => (b[orderBy] < a[orderBy] ? -1 : 1))
+      : this.state.data.sort((a, b) => (a[orderBy] < b[orderBy] ? -1 : 1));
+
+    this.setState({ data, order, orderBy });
+  };
+
+  handleSelectAllClick = (event, checked) => {
+    if (checked) {
+      this.setState({ selected: this.state.data.map(n => n.id) });
+      return;
+    }
+    this.setState({ selected: [] });
+  };
+
+  handleClick = (event, id) => {
+    if (!this.state.checkcell) {
+      return;
+    }
+    const { selected } = this.state;
+    const selectedIndex = selected.indexOf(id);
+    let newSelected = [];
+
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, id);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(
+        selected.slice(0, selectedIndex),
+        selected.slice(selectedIndex + 1),
+      );
+    }
+
+    this.setState({ selected: newSelected });
+  };
+
+  handleChangePage = (event, page) => {
+    this.setState({ page });
+  };
+
+  handleChangeRowsPerPage = event => {
+    this.setState({ rowsPerPage: event.target.value });
+  };
+
+  isSelected = id => this.state.selected.indexOf(id) !== -1;
+
+  handleUserInput(value) {
+    // Show all item first
+    if (value !== '') {
+      this.setState({ rowsPerPage: this.state.data.length });
+    } else {
+      this.setState({ rowsPerPage: this.state.defaultPerPage });
+    }
+
+    // Show result base on keyword
+    this.setState({ filterText: value.toLowerCase() });
+  }
+
+  render() {
+    const { classes } = this.props;
+    const {
+      data,
+      order,
+      orderBy,
+      selected,
+      rowsPerPage,
+      page,
+      filterText,
+      size,
+      columnData,
+      toolbar, pagination, checkcell,
+      bordered, stripped, hovered
+    } = this.state;
+    const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage));
+    const renderCell = (dataArray, keyArray) => keyArray.map((itemCell, index) => (
+      <TableCell align={itemCell.numeric ? 'right' : 'left'} key={index.toString()}>{dataArray[itemCell.id]}</TableCell>
+    ));
+    return (
+      <PapperBlock title="Table Playground" desc="">
+        <div>
+          <Grid container className={classes.root}>
+            <Grid item xs={12}>
+              <Grid container className={classes.settings}>
+                <Grid item xs={6} sm={4}>
+                  <FormControl component="fieldset">
+                    <FormLabel>Size</FormLabel>
+                    <RadioGroup
+                      name="size"
+                      aria-label="size"
+                      value={size}
+                      onChange={this.handleChangeRadio('size')}
+                    >
+                      <FormControlLabel value="small" control={<Radio />} label="Small" />
+                      <FormControlLabel value="medium" control={<Radio />} label="Medium" />
+                      <FormControlLabel value="big" control={<Radio />} label="Big" />
+                    </RadioGroup>
+                  </FormControl>
+                </Grid>
+                <Grid item xs={6} sm={4}>
+                  <FormControl component="fieldset">
+                    <FormLabel>Style</FormLabel>
+                    <FormGroup>
+                      <FormControlLabel
+                        control={(
+                          <Checkbox
+                            checked={this.state.bordered}
+                            onChange={this.handleChangeCheck('bordered')}
+                            value="bordered"
+                          />
+                        )}
+                        label="Bordered"
+                      />
+                      <FormControlLabel
+                        control={(
+                          <Checkbox
+                            checked={this.state.stripped}
+                            onChange={this.handleChangeCheck('stripped')}
+                            value="stripped"
+                          />
+                        )}
+                        label="Strppied"
+                      />
+                      <FormControlLabel
+                        control={(
+                          <Checkbox
+                            checked={this.state.hovered}
+                            onChange={this.handleChangeCheck('hovered')}
+                            value="hovered"
+                          />
+                        )}
+                        label="Hovered"
+                      />
+                    </FormGroup>
+                  </FormControl>
+                </Grid>
+                <Grid item xs={6} sm={4}>
+                  <FormControl component="fieldset">
+                    <FormLabel>Component</FormLabel>
+                    <FormGroup>
+                      <FormControlLabel
+                        control={(
+                          <Checkbox
+                            checked={this.state.toolbar}
+                            onChange={this.handleChangeCheck('toolbar')}
+                            value="toolbar"
+                          />
+                        )}
+                        label="Toolbar"
+                      />
+                      <FormControlLabel
+                        control={(
+                          <Checkbox
+                            checked={this.state.checkcell}
+                            onChange={this.handleChangeCheck('checkcell')}
+                            value="checkcell"
+                          />
+                        )}
+                        label="Checkbox"
+                      />
+                      <FormControlLabel
+                        control={(
+                          <Checkbox
+                            checked={this.state.pagination}
+                            onChange={this.handleChangeCheck('pagination')}
+                            value="pagination"
+                          />
+                        )}
+                        label="Pagination"
+                      />
+                    </FormGroup>
+                  </FormControl>
+                </Grid>
+              </Grid>
+            </Grid>
+            <Grid item xs={12}>
+              <Paper className={classes.root}>
+                {toolbar
+                  && (
+                    <EnhancedTableToolbar
+                      numSelected={selected.length}
+                      filterText={filterText}
+                      onUserInput={(event) => this.handleUserInput(event)}
+                    />
+                  )
+                }
+                <div className={classes.tableWrapper}>
+                  <Table className={
+                    classNames(
+                      classes.table,
+                      hovered && tableStyles.hover,
+                      stripped && tableStyles.stripped,
+                      bordered && tableStyles.bordered,
+                      tableStyles[size]
+                    )}
+                  >
+                    <EnhancedTableHead
+                      numSelected={selected.length}
+                      order={order}
+                      orderBy={orderBy}
+                      onSelectAllClick={this.handleSelectAllClick}
+                      onRequestSort={this.handleRequestSort}
+                      rowCount={data.length}
+                      columnData={columnData}
+                      checkcell={checkcell}
+                    />
+                    <TableBody>
+                      {data.slice(page * rowsPerPage, (page * rowsPerPage) + rowsPerPage).map(n => {
+                        const isSelected = this.isSelected(n.id);
+                        if (n.name.toLowerCase().indexOf(filterText) === -1) {
+                          return false;
+                        }
+                        return (
+                          <TableRow
+                            onClick={event => this.handleClick(event, n.id)}
+                            role="checkbox"
+                            aria-checked={isSelected}
+                            tabIndex={-1}
+                            key={n.id}
+                            selected={isSelected}
+                          >
+                            {checkcell
+                              && (
+                                <TableCell padding="checkbox">
+                                  <Checkbox checked={isSelected} />
+                                </TableCell>
+                              )
+                            }
+                            {renderCell(n, columnData)}
+                          </TableRow>
+                        );
+                      })}
+                      {emptyRows > 0 && (
+                        <TableRow style={{ height: 49 * emptyRows }}>
+                          <TableCell colSpan={6} />
+                        </TableRow>
+                      )}
+                    </TableBody>
+                  </Table>
+                </div>
+                {pagination
+                  && (
+                    <TablePagination
+                      rowsPerPageOptions={[5, 10, 25]}
+                      component="div"
+                      count={data.length}
+                      rowsPerPage={rowsPerPage}
+                      page={page}
+                      backIconButtonProps={{
+                        'aria-label': 'Previous Page',
+                      }}
+                      nextIconButtonProps={{
+                        'aria-label': 'Next Page',
+                      }}
+                      onChangePage={this.handleChangePage}
+                      onChangeRowsPerPage={this.handleChangeRowsPerPage}
+                    />
+                  )
+                }
+              </Paper>
+            </Grid>
+          </Grid>
+        </div>
+      </PapperBlock>
+    );
+  }
+}
+
+InteractiveGrid.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(InteractiveGrid);
diff --git a/front/odiparpack/app/containers/Tables/TreeTable.js b/front/odiparpack/app/containers/Tables/TreeTable.js
new file mode 100644
index 0000000..9b715fb
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/TreeTable.js
@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Markdown from 'react-markdown';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { withStyles } from '@material-ui/core/styles';
+import codeStyle from 'ba-styles/Code.scss';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Paper } from '@material-ui/core';
+import { TreeTableDemo, TreeTableDemoIcon } from './demos';
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class TreeTablePage extends Component {
+  render() {
+    const title = brand.name + ' - Table';
+    const description = brand.desc;
+    const docSrc = 'containers/Tables/demos/';
+    const { classes } = this.props;
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Tree Table Arrow Icon" desc="A simple Tree Collapsed/Expanded Table">
+          <div>
+            <Paper className={classes.root}>
+              <TreeTableDemo />
+            </Paper>
+            <SourceReader componentName={docSrc + 'TreeTableDemo.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Tree Table +/- Icon" desc="A Tree Table with +/- Icon">
+          <div>
+            <Markdown className={codeStyle.codePre} source="Just add attribute ``` icon='plusminus' ``` to change icon to +/-" />
+            <Paper className={classes.root}>
+              <TreeTableDemoIcon />
+            </Paper>
+            <SourceReader componentName={docSrc + 'TreeTableDemoIcon.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+TreeTablePage.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(TreeTablePage);
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: 'mail@boss.com',
+    radio: 'option2',
+    selection: 'option1',
+    onof: false,
+    checkbox: true,
+    textarea: 'Lorem ipsum dolor sit amet',
+    edited: false,
+  }, {
+    id: '2',
+    text: 'Some text',
+    email: 'mail@material.com',
+    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: 'mail@admin.com',
+    radio: 'option1',
+    selection: 'option3',
+    onof: false,
+    checkbox: false,
+    textarea: 'Lorem ipsum dolor sit amet',
+    edited: false,
+  }, {
+    id: '4',
+    text: 'And editable',
+    email: 'mail@example.com',
+    radio: 'option1',
+    selection: 'option1',
+    onof: false,
+    checkbox: true,
+    textarea: 'Lorem ipsum dolor sit amet',
+    edited: false,
+  }, {
+    id: '5',
+    text: 'You can write',
+    email: 'mail@material.com',
+    radio: 'option2',
+    selection: 'option2',
+    onof: false,
+    checkbox: true,
+    textarea: 'Lorem ipsum dolor sit amet',
+    edited: false,
+  }, {
+    id: '6',
+    text: 'Everything You want here',
+    email: 'mail@everything.com',
+    radio: 'option1',
+    selection: 'option3',
+    onof: false,
+    checkbox: false,
+    textarea: 'Lorem ipsum dolor sit amet',
+    edited: false,
+  },
+];
-- 
cgit v1.2.3