title: React Virtualized - Table Example - How do I make it work?
body: <p>I've been struggling to make <a href="https://bvaughn.github.io/react-virtualized/#/components/Table" rel="noreferrer">this react virtualized table example</a> work &amp; seriously starting to doubt my sanity. I've created a react app and I'm just trying to render the example table inside App.js with this:</p>
  
  <pre><code>class App extends Component {
      render() {
          var data = [1,2,3,4,5,6,7,8,9,10];
          return (
              &lt;TableExample
                  list={data}
              /&gt;
          );
      }
  }
  </code></pre>
  
  <p>React keeps saying <code>list</code> isn't defined - it seems obvious I'm not getting the data into the component the right way. I haven't been able to understand the example code, what props need to be passed in and what they should be named. Sorry for the stupid question but I've been stuck forever not knowing where else to find an answer. The table example code is below:</p>
  
  <pre><code>/** @flow */
  import Immutable from 'immutable';
  import PropTypes from 'prop-types';
  import * as React from 'react';
  import {
    ContentBox,
    ContentBoxHeader,
    ContentBoxParagraph,
  } from '../demo/ContentBox';
  import {LabeledInput, InputRow} from '../demo/LabeledInput';
  import AutoSizer from '../AutoSizer';
  import Column from './Column';
  import Table from './Table';
  import SortDirection from './SortDirection';
  import SortIndicator from './SortIndicator';
  import styles from './Table.example.css';
  
  export default class TableExample extends React.PureComponent {
    static contextTypes = {
      list: PropTypes.instanceOf(Immutable.List).isRequired,
    };
  
    constructor(props, context) {
      super(props, context);
  
      const sortBy = 'index';
      const sortDirection = SortDirection.ASC;
      const sortedList = this._sortList({sortBy, sortDirection});
  
      this.state = {
        disableHeader: false,
        headerHeight: 30,
        height: 270,
        hideIndexRow: false,
        overscanRowCount: 10,
        rowHeight: 40,
        rowCount: 1000,
        scrollToIndex: undefined,
        sortBy,
        sortDirection,
        sortedList,
        useDynamicRowHeight: false,
      };
  
      this._getRowHeight = this._getRowHeight.bind(this);
      this._headerRenderer = this._headerRenderer.bind(this);
      this._noRowsRenderer = this._noRowsRenderer.bind(this);
      this._onRowCountChange = this._onRowCountChange.bind(this);
      this._onScrollToRowChange = this._onScrollToRowChange.bind(this);
      this._rowClassName = this._rowClassName.bind(this);
      this._sort = this._sort.bind(this);
    }
  
    render() {
      const {
        disableHeader,
        headerHeight,
        height,
        hideIndexRow,
        overscanRowCount,
        rowHeight,
        rowCount,
        scrollToIndex,
        sortBy,
        sortDirection,
        sortedList,
        useDynamicRowHeight,
      } = this.state;
  
      const rowGetter = ({index}) =&gt; this._getDatum(sortedList, index);
  
      return (
        &lt;ContentBox&gt;
          &lt;ContentBoxHeader
            text="Table"
            sourceLink="https://github.com/bvaughn/react-virtualized/blob/master/source/Table/Table.example.js"
            docsLink="https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md"
          /&gt;
  
          &lt;ContentBoxParagraph&gt;
            The table layout below is created with flexboxes. This allows it to
            have a fixed header and scrollable body content. It also makes use of{' '}
            &lt;code&gt;Grid&lt;/code&gt; for windowing table content so that large lists are
            rendered efficiently. Adjust its configurable properties below to see
            how it reacts.
          &lt;/ContentBoxParagraph&gt;
  
          &lt;ContentBoxParagraph&gt;
            &lt;label className={styles.checkboxLabel}&gt;
              &lt;input
                aria-label="Use dynamic row heights?"
                checked={useDynamicRowHeight}
                className={styles.checkbox}
                type="checkbox"
                onChange={event =&gt;
                  this._updateUseDynamicRowHeight(event.target.checked)
                }
              /&gt;
              Use dynamic row heights?
            &lt;/label&gt;
  
            &lt;label className={styles.checkboxLabel}&gt;
              &lt;input
                aria-label="Hide index?"
                checked={hideIndexRow}
                className={styles.checkbox}
                type="checkbox"
                onChange={event =&gt;
                  this.setState({hideIndexRow: event.target.checked})
                }
              /&gt;
              Hide index?
            &lt;/label&gt;
  
            &lt;label className={styles.checkboxLabel}&gt;
              &lt;input
                aria-label="Hide header?"
                checked={disableHeader}
                className={styles.checkbox}
                type="checkbox"
                onChange={event =&gt;
                  this.setState({disableHeader: event.target.checked})
                }
              /&gt;
              Hide header?
            &lt;/label&gt;
          &lt;/ContentBoxParagraph&gt;
  
          &lt;InputRow&gt;
            &lt;LabeledInput
              label="Num rows"
              name="rowCount"
              onChange={this._onRowCountChange}
              value={rowCount}
            /&gt;
            &lt;LabeledInput
              label="Scroll to"
              name="onScrollToRow"
              placeholder="Index..."
              onChange={this._onScrollToRowChange}
              value={scrollToIndex || ''}
            /&gt;
            &lt;LabeledInput
              label="List height"
              name="height"
              onChange={event =&gt;
                this.setState({height: parseInt(event.target.value, 10) || 1})
              }
              value={height}
            /&gt;
            &lt;LabeledInput
              disabled={useDynamicRowHeight}
              label="Row height"
              name="rowHeight"
              onChange={event =&gt;
                this.setState({
                  rowHeight: parseInt(event.target.value, 10) || 1,
                })
              }
              value={rowHeight}
            /&gt;
            &lt;LabeledInput
              label="Header height"
              name="headerHeight"
              onChange={event =&gt;
                this.setState({
                  headerHeight: parseInt(event.target.value, 10) || 1,
                })
              }
              value={headerHeight}
            /&gt;
            &lt;LabeledInput
              label="Overscan"
              name="overscanRowCount"
              onChange={event =&gt;
                this.setState({
                  overscanRowCount: parseInt(event.target.value, 10) || 0,
                })
              }
              value={overscanRowCount}
            /&gt;
          &lt;/InputRow&gt;
  
          &lt;div&gt;
            &lt;AutoSizer disableHeight&gt;
              {({width}) =&gt; (
                &lt;Table
                  ref="Table"
                  disableHeader={disableHeader}
                  headerClassName={styles.headerColumn}
                  headerHeight={headerHeight}
                  height={height}
                  noRowsRenderer={this._noRowsRenderer}
                  overscanRowCount={overscanRowCount}
                  rowClassName={this._rowClassName}
                  rowHeight={useDynamicRowHeight ? this._getRowHeight : rowHeight}
                  rowGetter={rowGetter}
                  rowCount={rowCount}
                  scrollToIndex={scrollToIndex}
                  sort={this._sort}
                  sortBy={sortBy}
                  sortDirection={sortDirection}
                  width={width}&gt;
                  {!hideIndexRow &amp;&amp; (
                    &lt;Column
                      label="Index"
                      cellDataGetter={({rowData}) =&gt; rowData.index}
                      dataKey="index"
                      disableSort={!this._isSortEnabled()}
                      width={60}
                    /&gt;
                  )}
                  &lt;Column
                    dataKey="name"
                    disableSort={!this._isSortEnabled()}
                    headerRenderer={this._headerRenderer}
                    width={90}
                  /&gt;
                  &lt;Column
                    width={210}
                    disableSort
                    label="The description label is really long so that it will be truncated"
                    dataKey="random"
                    className={styles.exampleColumn}
                    cellRenderer={({cellData}) =&gt; cellData}
                    flexGrow={1}
                  /&gt;
                &lt;/Table&gt;
              )}
            &lt;/AutoSizer&gt;
          &lt;/div&gt;
        &lt;/ContentBox&gt;
      );
    }
  
    _getDatum(list, index) {
      return list.get(index % list.size);
    }
  
    _getRowHeight({index}) {
      const {list} = this.context;
  
      return this._getDatum(list, index).size;
    }
  
    _headerRenderer({dataKey, sortBy, sortDirection}) {
      return (
        &lt;div&gt;
          Full Name
          {sortBy === dataKey &amp;&amp; &lt;SortIndicator sortDirection={sortDirection} /&gt;}
        &lt;/div&gt;
      );
    }
  
    _isSortEnabled() {
      const {list} = this.context;
      const {rowCount} = this.state;
  
      return rowCount &lt;= list.size;
    }
  
    _noRowsRenderer() {
      return &lt;div className={styles.noRows}&gt;No rows&lt;/div&gt;;
    }
  
    _onRowCountChange(event) {
      const rowCount = parseInt(event.target.value, 10) || 0;
  
      this.setState({rowCount});
    }
  
    _onScrollToRowChange(event) {
      const {rowCount} = this.state;
      let scrollToIndex = Math.min(
        rowCount - 1,
        parseInt(event.target.value, 10),
      );
  
      if (isNaN(scrollToIndex)) {
        scrollToIndex = undefined;
      }
  
      this.setState({scrollToIndex});
    }
  
    _rowClassName({index}) {
      if (index &lt; 0) {
        return styles.headerRow;
      } else {
        return index % 2 === 0 ? styles.evenRow : styles.oddRow;
      }
    }
  
    _sort({sortBy, sortDirection}) {
      const sortedList = this._sortList({sortBy, sortDirection});
  
      this.setState({sortBy, sortDirection, sortedList});
    }
  
    _sortList({sortBy, sortDirection}) {
      const {list} = this.context;
  
      return list
        .sortBy(item =&gt; item[sortBy])
        .update(
          list =&gt; (sortDirection === SortDirection.DESC ? list.reverse() : list),
        );
    }
  
    _updateUseDynamicRowHeight(value) {
      this.setState({
        useDynamicRowHeight: value,
      });
    }
  }
  </code></pre>