When Rendering Table Example: TypeError: Cannot read property 'table' of undefined

[KyleAsaff]

I am trying to render https://github.com/react-toolbox/react-toolbox/tree/2.0.0-beta.8/components/table and get a TypeError. I am able to render the button component fine as a test but unable to render a table:

DataTable.js:

import React, { Component } from 'react';
import { Table, TableHead, TableRow, TableCell } from 'react-toolbox/lib/table/Table';
import Tooltip from 'react-toolbox/lib/tooltip/Tooltip';

const data = [
  { name: 'Cupcake', calories: 305, fat: 3.7, sodium: 413, calcium: '3%', iron: '8%' },
  { name: 'Donut', calories: 452, fat: 25.0, sodium: 326, calcium: '2%', iron: '22%' },
  { name: 'Eclair', calories: 262, fat: 16.0, sodium: 337, calcium: '6%', iron: '7%' },
  { name: 'Frozen yogurt', calories: 159, fat: 6.0, sodium: 87, calcium: '14%', iron: '1%' },
  { name: 'Gingerbread', calories: 356, fat: 16.0, sodium: 327, calcium: '7%', iron: '16%' },
  { name: 'Ice cream sandwich', calories: 237, fat: 9.0, sodium: 129, calcium: '8%', iron: '1%' },
  { name: 'Jelly bean', calories: 375, fat: 0.0, sodium: 50, calcium: '0%', iron: '0%' },
  { name: 'KitKat', calories: 518, fat: 26.0, sodium: 54, calcium: '12%', iron: '6%' },
];

const TooltipCell = Tooltip(TableCell);

const sortByCaloriesAsc = (a, b) => {
  if (a.calories < b.calories) return -1;
  if (a.calories > b.calories) return 1;
  return 0;
};

const sortByCaloriesDesc = (a, b) => {
  if (a.calories > b.calories) return -1;
  if (a.calories < b.calories) return 1;
  return 0;
};

class DataTable extends Component {
  state = {
    selected: ['Donut'],
    sorted: 'asc',
  };

  getSortedData = () => {
    const compare = this.state.sorted === 'asc' ? sortByCaloriesAsc : sortByCaloriesDesc;
    return data.sort(compare);
  }

  handleRowSelect = (selected) => {
    const sortedData = this.getSortedData();
    this.setState({ selected: selected.map(item => sortedData[item].name) });
  };

  handleSortClick = () => {
    const { sorted } = this.state;
    const nextSorting = sorted === 'asc' ? 'desc' : 'asc';
    this.setState({ sorted: nextSorting });
  };

  render() {
    const { sorted } = this.state;
    const sortedData = this.getSortedData();
    return (
      <Table >
        <TableHead>
          <TooltipCell tooltip="The total amount of food energy in the given serving size">
            Dessert (100g serving)
          </TooltipCell>
          <TableCell onClick={this.handleSortClick} numeric sorted={sorted}>Calories</TableCell>
          <TableCell numeric>Fat (g)</TableCell>
          <TableCell numeric>Sodium (mg)</TableCell>
          <TableCell numeric>Calcium (%)</TableCell>
          <TableCell numeric>Iron (%)</TableCell>
        </TableHead>
        {sortedData.map((item, idx) => (
          <TableRow key={idx} selected={this.state.selected.indexOf(item.name) !== -1}>
            <TableCell>{item.name}</TableCell>
            <TableCell numeric>{item.calories}</TableCell>
            <TableCell numeric>{item.fat}</TableCell>
            <TableCell numeric>{item.sodium}</TableCell>
            <TableCell numeric>{item.calcium}</TableCell>
            <TableCell numeric>{item.iron}</TableCell>
          </TableRow>
        ))}
      </Table>
    );
  }
}

export default DataTable;

App.js:

import React from 'react';
import DataTable from '../components/DataTable';

export function App() {
  return (
    <div>
      <DataTable />
    </div>
  );
}

export default App;

Index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import ThemeProvider from 'react-toolbox/lib/ThemeProvider';
import theme from './assets/react-toolbox/theme';
import App from './containers/App';
import registerServiceWorker from './registerServiceWorker';
import './assets/react-toolbox/theme.css';

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root'));
registerServiceWorker();

any work around for this issue?

[KyleAsaff]

Table.render node_modules/react-toolbox/lib/table/Table.js:136

  133 | 
  134 | return _react2.default.createElement(
  135 |   'table',
> 136 |   _extends({}, rest, { className: (0, _classnames2.default)(theme.table, className) }),
  137 |   _react2.default.createElement(
  138 |     'thead',
  139 |     { className: theme.head },

[lx0n2acl]

Had the same exact issue - solved by

import { Table, TableHead, TableRow, TableCell } from 'react-toolbox/lib/table';

instead of

import { Table, TableHead, TableRow, TableCell } from 'react-toolbox/lib/table/Table';