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.
Create 2-dimensional scrollable HTML table
Here is the demo of scroll behavior we are going to achieve for our table.
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>
);
};
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:
Top comments (0)