Let's create Data Table with React, TanStack Table and Tailwind CSS. Part 1: Intro and HTML layout

Intro

Data table is a widely used UI pattern for organizing large volumes of data. They are essential in various dashboards, admin panels, and other complex interfaces.

In this series of articles, I will guide you through the step-by-step creation of a Data Table component using React and Tailwind. This component will be designed to handle large datasets efficiently and provide a range of features to enhance user interaction and data management.

Data table features

• Efficient Data Rendering: Capable of rendering large datasets, approximately 50,000 rows, without performance issues.

• Data Formatting: Ability to display properly formatted data, including numbers, currency, dates, etc.

• Responsive Layout: Support for responsive design to ensure usability on mobile devices.

• Column Sorting: Ascending and descending sorting functionality for columns.

• Column Filtering: Filtering capabilities based on provided criteria.

• CRUD Operations: Support for Create, Read, Update, and Delete operations on the data.

Technology stack

We will create our table using the following libraries:

• Tailwind CSS to manage styles.

• TanStack Table for data handling logic.

• Headless UI for various interface component logic.

Stay tuned as we delve into the implementation details, starting with the basic structure and gradually adding more advanced features.

Part 1. Creating a 2-dimensional scrollable HTML table

Here is the video demo of desired table look and scroll behavior.

As you may see, we are able to scroll body cell into 2 dimensions. At the same moment, the header stays attached to the top when scrolling vertical dimensions and follows body scroll.

const DataTable: FC = () => {
  return (
    <div className="h-min max-h-screen max-w-full overflow-auto">
      <table className="border-separate border-spacing-0 text-xs">
        <thead className="sticky left-0 top-0 z-20">
          <tr>
            <th
              className={classNames(
                // basic cell styles
                'whitespace-nowrap bg-stone-600 p-2 text-left font-normal text-gray-100',
                // set the top and bottom borders to each cell to match the header cell color
                'border-t border-solid border-t-stone-600 border-b border-b-stone-600 first:border-l',
                // set the right border of each cell to create a table internal visual grid
                'border-r border-r-stone-300',
                // add the left border to the first header cell
                'first:border-l-stone-300',
              )}
            >
              Table column #1
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td
              className={classNames(
                // basic cell styles
                'whitespace-nowrap font-normal text-gray-700 p-2',
                // set bottom and right borders to each cell to create a table internal visual grid
                'border-b border-solid border-b-stone-300 border-r border-r-stone-300',
                // add the left border to the first cell in each table row
                'first:border-l first:border-l-stone-300',
              )}
            >
              Table cell of column #1
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

Here is simplified table HTML.

Implement table borders

We have to set HTMLTableElement border collapse mode to separate (border-separate), so each table cell border is displayed and also set border space to 0 (border-spacing-0). Thus, we will have consistent table border display across browsers, other modes lead to display visible empty gaps between cells. Instead, we provided borders to each cell individually and created an outside border containing table.

Responsiveness

The wrapper div with Tailwind classes h-min max-h-screen max-w-full overflow-auto is used to achieve responsiveness. Provided classes set the size of maximum width to be limited by parent element and maximum height to be limited by screen size.

This div is also needed for sticky header to function.

Sticky header

In order to implement desired table header sticky behavior, we used sticky left-0 top-0 z-20 Tailwind classes.

Working demo

Here is the full result of this part:

Next: Add TanStack table and cell formatters