HTML Structure & CSS

This guide provides an overview of the HTML structure generated by the DataGrid and the CSS classes applied to key elements. You can use this for advanced styling and customization.

General Structure

The DataGrid is composed of a set of nested div elements. Here is a simplified view of the hierarchy:

<div class="dg-grid">
  <div class="dg-body">
    <!-- Header Row -->
    <div class="dg-header">
      <div class="dg-row" data-row-index="-1">
        <div class="dg-cell">...</div>
        <div class="dg-cell">...</div>
      </div>
    </div>

    <!-- Data Rows -->
    <div class="dg-row" data-row-index="0">
      <div class="dg-cell">...</div>
      <div class="dg-cell">...</div>
    </div>

    <!-- Group Row -->
    <div class="dg-group-row" data-row-index="1">...</div>

    <div class="dg-row" data-row-index="2">...</div>

    <!-- Virtualized Page -->
    <div class="dg-page">
      <!-- Placeholder while loading -->
      <div class="dg-row dg-row-loading">...</div>
    </div>
  </div>
</div>

CSS Class Reference

The component uses a set of dg- prefixed classes for styling. You can override these in your own stylesheets to customize the appearance of the grid.

Class Name	Element	Description
.dg-grid	Root container	The main wrapper for the entire grid component.
.dg-grid-{id}	Root container	A unique class applied to each grid instance for scoped styles (e.g., column widths).
.dg-body	Body container	A wrapper around the header and all row content.
.dg-header	Header container	A special container that holds the header row.
.dg-row	Data row	Applied to each div that represents a single row of data.
.dg-group-row	Group row	Applied to a row when type is set to 'group'.
.dg-cell	Cell	Applied to each div that represents a single cell within a row.
.dg-cell-{n}	Numbered cell	A 1-based indexed class applied to each cell (e.g., .dg-cell-1, .dg-cell-2).
.dg-page	Virtualized page	A container for a “page” of rows that are loaded on-demand.
.dg-row-loading	Loading placeholder	A placeholder div displayed while a virtualized page is loading content.

Styling Tip

The component ships with a default Tailwind CSS stylesheet. To customize, you can either override these classes in a separate CSS file or, for more control, copy the DataGrid-Tailwind.css file and modify it directly.

Data Attributes

The grid uses data-* attributes to manage state and handle events. These are stable and can be used for targeting elements in your own scripts or tests.

Attribute	Element	Description
data-row-index	.dg-row, .dg-group-row	The 0-based numerical index of the row within the dataset.
data-row-id	.dg-row, .dg-group-row	A unique identifier for the row, derived from the rowId prop.
data-cell-index	.dg-cell	The 0-based numerical index of the cell within its row.
data-cell-name	.dg-cell	The name of the column the cell belongs to.