Top React Libraries — Table, CSS, and Sortable List

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

react-table

The react-table package lets us add a table to our React app.

To install it, we run:

npm i react-table

Then we can use it by writing:

import React from "react";
import { useTable } from "react-table";

const tableData = [
  { firstName: "james", lastName: "smith", age: 20 },
  { firstName: "may", lastName: "jones", age: 20 },
  { firstName: "alex", lastName: "smith", age: 20 }
];

function Table({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

function App() {
  const columns = React.useMemo(
    () => [
      {
        Header: "Name",
        columns: [
          {
            Header: "First Name",
            accessor: "firstName"
          },
          {
            Header: "Last Name",
            accessor: "lastName"
          },
          {
            Header: "Age",
            accessor: "age"
          }
        ]
      }
    ],
    []
  );

  const data = React.useMemo(() => tableData, []);

  return (
    <>
      <Table columns={columns} data={data} />
    </>
  );
}

export default App;

We have an array with some data that we want to display in a table.

Then we create a Table component to display the data.

The component has the columns and data props.

We use that with the useTable hook to get more data needed to display the table.

Then we have the table component which has the getTableProps call to pass the props to the table.

headerGroups have the headers.

We call getHeaderGroupProps to pass the props to the tr.

tbody has the body and we use getTableBodyProps to get the props and pass them into there.

tr has the rows created from the prepareRow function.

We call the row.cells.map method to map them to cells.

The columns are defined in App .

We have the columns function of the Header and columns properties.

Header has the header to display.

accessor has the property name for from the tableData array entry we want to get and render.

Then we pass in the columns and data props to the Table component.

useMemo caches the data so that it’s only reloaded when it changes.

It has many other features like footers, sorting, filtering, and pagination.

ReactCSS

The ReactCSS package lets add inline styles with JavaScript.

It supports React. React Native, auto prefixing, hover, pseudoelements, and media queries.

To install it, we run:

npm i reactcss

Then we can use it by writing:

import React from "react";
import reactCSS from "reactcss";

const styles = reactCSS({
  default: {
    card: {
      background: "green",
      boxShadow: "0 2px 4px rgba(0,0,0,.15)",
      color: "white"
    }
  }
});

function App() {
  return (
    <>
      <div style={styles.card}>hello</div>
    </>
  );
}

export default App;

We created the styles with the reactCSS function.

The card property is an object with the styles.

We pass that into our div with the styles.card property.

Now we get a green background with a box shadow and the text color is white.

react-sortable-hoc

react-sortable-hoc is a package that lets us create sortable lists.

To install it, we can run:

npm i react-sortable-hoc

Then we use it by writing:

import React from "react";
import { SortableContainer, SortableElement } from "react-sortable-hoc";
import arrayMove from "array-move";

const SortableItem = SortableElement(({ value }) => <li>{value}</li>);

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${value}`} index={index} value={value} />
      ))}
    </ul>
  );
});

export default class App extends React.Component {
  state = {
    items: Array(20)
      .fill()
      .map((_, i) => `item ${i + 1}`)
  };
  onSortEnd = ({ oldIndex, newIndex }) => {
    this.setState(({ items }) => ({
      items: arrayMove(items, oldIndex, newIndex)
    }));
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}

SortableItem is a component with the sortable item.

We can drag them to sort them.

SortableList has our list with the SortableItems .

We just render them with map .

Then we have our App component with the items state with the items.

Also, we have the onSortEnd method to do the sorting with the arrayMove function.

It’s a helper that lets us change the position of the items without writing code to do it ourselves.

Now we get a list where we can drag items to move them.

Conclusion

react-table lets us create a table with ease.

ReactCSS create the CSS for us to use in our app.

react-sortable-hoc helps us create a sortable list easily.