bgerm / react-table-sorter-demo

A React.js Table Sorter Component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

A React.js Table Sorter Component

A demo that implements a sortable table component using Facebook's React.

Features:

  • Remote data loading
  • Sortable columns
  • Filterable columns
  • Repeatable headers

View the running demo.

Example

var CONFIG = {
  sort: { column: "col2", order: "desc" },
  columns: {
    col1: { name: "Col1", filterText: "", defaultSortOrder: "desc"},
    col2: { name: "Col2", filterText: "", defaultSortOrder: "desc"},
    col3: { name: "Col3", filterText: "", defaultSortOrder: "desc"}
  }
};

React.renderComponent(<TableSorter dataSource="/api/data.json" config={CONFIG} headerRepeat="5" />, document.getElementById("table-sorter"));

Running the Demo

The demo uses an in-browser JSX Transformer; therfore, the code cannot be run without a web server (or your browser will complain that "Cross origin requests are only supported for HTTP").

node-static is a quick solution.

npm install -g node-static
static

And now view at: http://localhost:8080/.

Screenshots

Demo Screenshot

About

A React.js Table Sorter Component

License:MIT License


Languages

Language:JavaScript 99.7%Language:CSS 0.3%