DEV Community

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

Posted on • Edited on

4 1 1 1

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:

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

Create 2-dimensional scrollable HTML table

Here is the demo of scroll behavior we are going to achieve for our table.

Table scroll demo

We can 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 for horizontal.

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(
                'whitespace-nowrap bg-stone-600 p-2 text-left font-normal text-gray-100',
                'border-t border-solid border-t-stone-600 border-b border-b-stone-600 first:border-l',
                '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(
                'whitespace-nowrap font-normal text-gray-700 p-2',
                'border-b border-solid border-b-stone-300 border-r border-r-stone-300',
                'first:border-l first:border-l-stone-300',
              )}
            >
              Table cell of column #1
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
};

Enter fullscreen mode Exit fullscreen mode

Here is simplified table HTML. We added basic cell styles using Tailwind classes whitespace-nowrap bg-stone-600 p-2 text-left font-normal text-gray-100.

Implement table borders

To effectively implement table borders, we have to establish consistent border display. We use Tailwind border-separate to set border-collapse to separate on the HTMLTableElement to ensure each cell has its own distinct border. We set border-spacing to 0 to eliminate unnecessary gaps between cells.

The next step is to define cell borders. Instead of relying on a single table border, we have to apply borders directly to individual cells. This is required to fix the gaps between cells, which arrive when using position:sticky.

For the header, we apply top and bottom borders to each cell in the row, matching the background color (border-t border-solid border-t-stone-600 border-b border-b-stone-600). Add a right border to each header cell to create a visual grid within the table (border-r border-r-stone-300). Apply a left border to the first cell in the header row (first:border-l-stone-300). The same applies to table body cells.

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 heTo 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

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay