reactable/src/reactable/thead.jsx

Fast, flexible, simple data tables in React

import React from 'react';
import { Th } from './th';
import { Filterer } from './filterer';
import { filterPropsFrom } from './lib/filter_props_from';

export class Thead extends React.Component {
    static getColumns(component) {
        // Can't use React.Children.map since that doesn't return a proper array
        let columns = [];
        React.Children.forEach(component.props.children, th => {
            var column = {};
            if (!th) return;
            if (typeof th.props !== 'undefined') {
                column.props = filterPropsFrom(th.props);

                // use the content as the label & key
                if (typeof th.props.children !== 'undefined') {
                    column.label = th.props.children;
                    column.key = column.label;
                }

                // the key in the column attribute supersedes the one defined previously
                if (typeof th.props.column === 'string') {
                    column.key = th.props.column;

                    // in case we don't have a label yet
                    if (typeof column.label === 'undefined') {
                        column.label = column.key;
                    }
                }
            }

            if (typeof column.key === 'undefined') {
                throw new TypeError(
                    '<th> must have either a "column" property or a string ' +
                    'child');
            } else {
                columns.push(column);
            }
        });

        return columns;
    }

    handleClickTh(column) {
        this.props.onSort(column.key);
    }

    handleKeyDownTh(column, event) {
      if (event.keyCode === 13) {
        this.props.onSort(column.key);
      }
    }

    render() {
        // Declare the list of Ths
        var Ths = [];
        for (var index = 0; index < this.props.columns.length; index++) {
            var column = this.props.columns[index];
            var thClass = `reactable-th-${column.key.replace(/\s+/g, '-').toLowerCase()}`;
            var sortClass = '';
            var thRole = null;

            if (this.props.sortableColumns[column.key]) {
                sortClass += 'reactable-header-sortable ';
                thRole = 'button';
            }

            if (this.props.sort.column === column.key) {
                sortClass += 'reactable-header-sort';
                if (this.props.sort.direction === 1) {
                    sortClass += '-asc';
                }
                else {
                    sortClass += '-desc';
                }
            }

            if (sortClass.length > 0) {
              thClass += ` ${sortClass}`;
            }

            if (
                typeof(column.props) === 'object' &&
                typeof(column.props.className) === 'string'
            ) {
                thClass += ` ${column.props.className}`;
            }

            Ths.push(
                <Th {...column.props}
                    className={thClass}
                    key={index}
                    onClick={this.handleClickTh.bind(this, column)}
                    onKeyDown={this.handleKeyDownTh.bind(this, column)}
                    role={thRole}
                    tabIndex="0">
                    {column.label}
                </Th>
            );
        }

        // Manually transfer props
        var props = filterPropsFrom(this.props);

        return (
            <thead {...props}>
                {this.props.filtering === true ?
                    <Filterer
                        colSpan={this.props.columns.length}
                        onFilter={this.props.onFilter}
                        placeholder={this.props.filterPlaceholder}
                        value={this.props.currentFilter}
                        className={this.props.filterClassName}
                    /> : null}
                <tr className="reactable-column-header">{Ths}</tr>
            </thead>
        );
    }
};