React: Up & Running, 2nd Edition

Chapter 3. Excel: A Fancy Table Component

Now you know how to create custom React components, compose 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 you’re at it) by creating a more powerful component—a data table. Something like an early prototype of Microsoft Excel that lets you edit the contents of a data table, and also sort, search, 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 that describe each column of data. For testing, let’s grab a list of best-selling books from Wikipedia:

const headers = ['Book', 'Author', 'Language', 'Published', 'Sales'];

const data = [
  [
    'A Tale of Two Cities', 'Charles Dickens',
      'English', '1859', '200 million',
  ],
  [
    'Le Petit Prince (The Little Prince)', 'Antoine de Saint-Exupéry',
      'French', '1943', '150 million',
  ],
  [
    "Harry Potter and the Philosopher's Stone", 'J. K. Rowling',
      'English', '1997', '120 million',
  ],
  [
    'And Then There Were None', 'Agatha Christie',
      'English', '1939', '100 million',
  ],
  [
    'Dream of the Red Chamber', 'Cao Xueqin',
      'Chinese', '1791', '100 million',
  ],
  [
    'The Hobbit', 'J. R. R. Tolkien',
      'English', '1937', '100 million',
  ],
];

Now, how should you go about rendering ...