Overview
Introduction
@qui/react-table is a powerful headless utility for building tables and data grids in React applications. It provides a set of hooks and functions to help you manage table state, sorting, filtering, and more, while giving you complete control over the rendering of your table components.
Separation of Concerns
Our table comprises two modules:
- Headless utilities.
- Prebuilt components featuring the QDS theme.
Headless Utilities
@qui/react-table separates the table logic (sorting, filtering, pagination, etc.) from the UI rendering.
Benefits:
- Developers have complete control over the appearance of the table. They can use any design framework or custom styles without being constrained by the library's built-in UI components.
- By decoupling logic and UI, maintaining and updating the code becomes easier. Changes to the table's behavior (e.g., how sorting works) can be made without affecting the visual aspects and vice versa.
- Testing the table's logic becomes simpler when it's separated from the UI. Unit tests can focus on the functionality without worrying about rendering, and UI tests can ensure the presentation is correct without delving into logic.
Prebuilt Components
@qui/react-table offers simple UI components that are designed to be accessible and easy to use. These components provide a look and feel that is consistent with @qui/react (and ultimately, QDS), allowing developers to quickly implement functional tables without starting from scratch.
Breakdown:
<QTable>:<table>element.<QThead>:<thead>element.<QTbody>:<tbody>element.<QTfoot>:<tfoot>element.<QTr>:<tr>element.<QTh>:<th>element.<QTd>:<td>element.
These components are polymorphic, enabling developers to replace the root node of each component with ease. This flexibility means you're not confined to semantic HTML table elements. You can use any component or element that best fits your needs.