<datagrid>
The <datagrid> element was proposed in early HTML5 drafts as an interactive representation of tree, list, or tabular data. It was intended to provide a native way to display data with features like sorting, selection, and editing. However, this element was never implemented by any browser and was removed from the HTML5 specification before reaching any stable release.
This page was last updated on 2025-11-17
Deprecation Warning
DO NOT USE THIS ELEMENT. The <datagrid> element was never implemented in any browser and has been completely removed from HTML specifications. It exists only in historical documentation of very early HTML5 working drafts (circa 2007-2008).
Any code using this element will be ignored by browsers. The element will be treated as unknown and will have no interactive functionality whatsoever.
History
The <datagrid> element appeared in initial HTML5 working drafts with ambitious goals:
- Provide native support for interactive data grids
- Display tree structures, lists, and tabular data
- Support row selection, sorting, and inline editing
- Integrate with JavaScript data providers
- Offer a standardized alternative to complex JavaScript grid libraries
The element was removed because:
- The specification was extremely complex and ambitious
- No browser vendor committed to implementing it
- JavaScript libraries already provided this functionality effectively
- Performance concerns with a native implementation
- The scope was too large for standardization at that time
- Different use cases required different grid behaviors
Proposed Syntax
The proposed syntax included several attributes for data binding:
<datagrid>
<!-- Data would be provided via JavaScript -->
</datagrid>
Proposed Features
- multiple — Allow multiple row selection
- disabled — Disable the entire grid
- JavaScript API for data providers
- Event handlers for selection changes
- Column definitions and sorting capabilities
Conceptual Example (Non-functional)
<!-- This code does NOT work -->
<datagrid id="productGrid" multiple></datagrid>
<script>
// Would have used a JavaScript data provider
var grid = document.getElementById('productGrid');
grid.data = [
{name: 'Product 1', price: 10.00},
{name: 'Product 2', price: 20.00}
];
</script>
Modern Alternatives
For data grid functionality, use these proven approaches:
HTML Table with Basic Interactivity
<table id="dataTable">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>$10.00</td>
</tr>
</tbody>
</table>
JavaScript Grid Libraries
Popular libraries that provide rich grid functionality:
- AG Grid — Full-featured enterprise grid
- DataTables — jQuery-based table enhancement
- Handsontable — Spreadsheet-like data grid
- React Table — Headless table hooks for React
- Tabulator — Interactive tables and data grids
CSS Grid for Layout
<div class="data-grid">
<div class="header">Name</div>
<div class="header">Price</div>
<div class="cell">Product 1</div>
<div class="cell">$10.00</div>
</div>
<style>
.data-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
</style>
These alternatives offer more flexibility, better browser support, and richer features than the proposed <datagrid> element ever would have provided.
