React: Up & Running

Chapter 3. Excel: A Fancy Table Component

Now you know how to create custom react components, compose (render) UI using generic DOM components as well as your own custom ones, set properties, maintain state, hook into the lifecycle of a component, and optimize performance by not rerendering when not necessary.

Let’s put all of this together (and learn more about React while at it) by creating a more interesting component—a data table. Something like an early prototype of Microsoft Excel v.0.1.beta that lets you edit the contents of a data table, and also sort, search (filter), and export the data as downloadable files.

Data First

Tables are all about the data, so the fancy table component (why not call it Excel?) should take an array of data and an array of headers. For testing, let’s grab a list of best-selling books from Wikipedia:

var headers = [
  "Book", "Author", "Language", "Published", "Sales"
];

var data = [
  ["The Lord of the Rings", "J. R. R. Tolkien",
    "English", "1954–1955", "150 million"],
  ["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupéry",
    "French", "1943", "140 million"],
  ["Harry Potter and the Philosopher's Stone", "J. K. Rowling",
    "English", "1997", "107 million"],
  ["And Then There Were None", "Agatha Christie",
    "English", "1939", "100 million"],
  ["Dream of the Red Chamber", "Cao Xueqin",
    "Chinese", "1754–1791", "100 million"],
  ["The Hobbit", "J. R. R. Tolkien",
    "English", "1937", "100 million"],
  ["She: A History of Adventure", "H. Rider Haggard" ...