reactabular-search-columns
Search columns for Reactabular
Last updated 4 years ago by bebraw .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install reactabular-search-columns 
SYNC missed versions from official npm registry.

reactabular-search-columns provides a single component you can inject within a table header that allows you to search per column. It expects columns and onChange handler. The latter is used to update the search query based on the search protocol.

How to Use?

Consider the example below.

Example:

/*
import React from 'react';
import {
  Table, SearchColumns, search
} from 'reactabular';
*/

class SearchColumnsTable extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      query: {}, // Search query
      columns: [
        {
          property: 'name',
          header: {
            label: 'Name'
          }
        },
        {
          property: 'age',
          header: {
            label: 'Age'
          }
        }
      ],
      rows: [
        {
          id: 100,
          name: 'Adam',
          age: 12
        },
        {
          id: 101,
          name: 'Brian',
          age: 7
        },
        {
          id: 102,
          name: 'Jake',
          age: 88
        },
        {
          id: 103,
          name: 'Jill',
          age: 50
        }
      ]
    };
  }
  render() {
    const { rows, columns, query } = this.state;
    const searchedRows = search.multipleColumns({ columns, query })(rows);

    return (
      <Table.Provider columns={columns}>
        <Table.Header>
          <SearchColumns
            query={query}
            columns={columns}
            onChange={query => this.setState({ query })}
          />
        </Table.Header>

        <Table.Body rows={searchedRows} rowKey="id" />
      </Table.Provider>
    );
  }
}

<SearchColumnsTable />

Current Tags

  • 2.0.5-alpha.331d29a6                                ...           canary (4 years ago)
  • 6.0.0                                ...           latest (4 years ago)

9 Versions

  • 6.0.0                                ...           4 years ago
  • 3.0.0                                ...           4 years ago
  • 2.0.5-alpha.331d29a6                                ...           4 years ago
  • 2.0.5-alpha.f20b57cb                                ...           4 years ago
  • 2.0.1                                ...           4 years ago
  • 2.0.0                                ...           4 years ago
  • 1.2.6-alpha.61e29539                                ...           4 years ago
  • 1.2.4                                ...           4 years ago
  • 1.2.3                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 3
Dependencies (0)
None
Dev Dependencies (2)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |