How to use the ix.Iterable.range function in ix

protected renderIndent() {
    return Iterable
      .range(0, this.props.depth || 0)
      .map((x, i) => {
        return (
          <div></div>
        ) as PanelFragment | false;
      })
      .defaultIfEmpty(false)
      .toArray();
  }

renderItems(children?: React.ReactNode, componentClass?: React.ReactType) {
    const itemTemplates = super.renderItems(children, componentClass);

    let index = 0 - this.props.firstColumn!;
    return Iterable
      .range(0, this.props.gridRows)
      .map(row => {
        if (this.props.renderEmptyRows !== true && index >= itemTemplates.length) {
          return undefined;
        }

        return Iterable
          .range(0, this.props.gridColumns)
          .map(column => {
            const isBeforeFirstItem = index < 0;
            const isAfterLastItem = index >= itemTemplates.length;

            const itemTemplate = (isBeforeFirstItem || isAfterLastItem) ?
              this.renderEmpty(row, column, index) :
              itemTemplates[index];

private renderDropdown(cols: number) {
    return (
       x.setColumns) }
      >
        {
          Iterable
            .range(1, 13)
            .reverse()
            .map(x => x % 13)
            .map(x => (
              <menuitem cols="==" x="">{ x === 0 ? 'Full Width' : x }</menuitem>
            ))
            .toArray()
        }
      
    );
  }
}

renderItems(allChildren?: React.ReactNode, componentClass?: React.ReactType) {
    const { children, rows, cols } = this.getLayout();

    return Iterable
      .range(0, rows.length)
      .map(row => {
        const colItems = Iterable
          .range(0, cols.length)
          .map(col => {
            return this.renderColumn(row, col, rows, cols, children);
          })
          .toArray();

        return this.renderRow(row, rows, colItems);
      })
      .defaultIfEmpty(this.renderEmpty())
      .toArray();
  }

.map(row => {
        const colItems = Iterable
          .range(0, cols.length)
          .map(col => {
            return this.renderColumn(row, col, rows, cols, children);
          })
          .toArray();

        return this.renderRow(row, rows, colItems);
      })
      .defaultIfEmpty(this.renderEmpty())

.map(row => {
        if (this.props.renderEmptyRows !== true && index >= itemTemplates.length) {
          return undefined;
        }

        return Iterable
          .range(0, this.props.gridColumns)
          .map(column => {
            const isBeforeFirstItem = index < 0;
            const isAfterLastItem = index >= itemTemplates.length;

            const itemTemplate = (isBeforeFirstItem || isAfterLastItem) ?
              this.renderEmpty(row, column, index) :
              itemTemplates[index];

            const item = (itemTemplate != null && React.isValidElement(itemTemplate)) ?
              React.cloneElement(itemTemplate, { key: GridLayoutDefinition.generateKey(row, column) }) :
              itemTemplate;

            const context = { row, column, index: index++ };
            const colClassName = Panel.getPanelItemPropValue(this.props.columnClassName, context);
            const colStyle = Panel.getPanelItemPropValue(this.props.columnStyle, context);

render() {
    return (
      <div>
        
          
            {
              Iterable
                .range(1, 12)
                .map(x =&gt; (
                  
                    <div>{ `Col ${ x }` }</div>
                  
                ))
                .toArray()
            }
          
        
        <div></div>
        <div></div>
      </div>
    );
  }