TGViewer
<divelopers> <divelopers> @alexnozer_dev · 1.18K subscribers
Post #165 652
<datagrid>, который мы потеряли

В недавнем опросе State of HTML был вопрос “если бы вы могли добавить 3 элемента в HTML, что бы это было”. На выбор предлагалось 11 фиксированных вариантов и поле со свободным вводом. Один из вариантов — Data Table with sorting, filtering, etc. Этого элемента чертовски не хватает тем, кто разрабатывает современные бизнес-приложения, где всегда есть интерактивные таблицы с данными.

Разработчикам приходится подключать сторонние библиотеки с таблицами, зачастую очень тяжёлые. Или реализовывать нетривиальную функциональность таблиц самостоятельно. Для специалистов по доступности это тоже вызов, потому что у интерактивных таблиц сложная модель взаимодействия со вспомогательными технологиями. Взгляните на документацию от WAI:

- общее описание паттерна
- свойства таблиц
- пример реализации

Пример WAI достаточно базовый, в реальных приложениях таблицы сложнее. Забавно, что у WAI есть пример сложной интерактивной таблицы, но это страница-заглушка без контента. До недавнего времени некоторые разделы про таблицы содержали пометки TODO. То есть даже в WAI ещё не до конца решили все вопросы с таблицами.

Было бы здорово, чтобы ребята из WHATWG, CSSWG, WAI и браузеров собрались и сделали классный примитив для интерактивных таблиц. Тем временем я обнаружил кое что интересное в первом или одном из первых черновиков спецификации HTML5 от 22 января 2008 года. Это элемент <datagrid>:

The datagrid element represents an interactive representation of tree, list, or tabular data.

<…>

In the datagrid data model, data is structured as a set of rows representing a tree, each row being split into a number of columns. The columns are always present in the data model, although individual columns may be hidden in the presentation.


В далёком 2008 году (почти 17 лет назад) в спецификацию добавили элемент, который представляет интерактивные таблицы и деревья. Согласно спецификации, в <datagrid> можно было вкладывать <table>, <ol>, <select>, <datalist> и другие. В зависимости от вложенных элементов, менялось поведение <datagrid>. Элемент предлагал методы для работы с данными: получение количества строк и столбцов, сортировка столбцов, выделение и редактирование ячеек, контекстное меню строки и т.д.

Мощнейшее предложение, которое удалили из черновика в 2009 году. Представить только, если бы браузеры реализовали это… Кто знает, может быть в ближайшем будущем к <datagrid> вернутся.

Делать ли ещё посты с обзором подобных находок из прошлого?
Web Accessibility Initiative (WAI) Grid (Interactive Tabular Data and Layout Containers) Pattern Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).
  • 👍 5
  • 😭 3
More from @alexnozer_dev
  1. Sep 23, 2026Images Preview На некоторых сайтах, где надо показывать изображения в высоком качестве, дл…
  2. Sep 21, 2026Реализация пользовательских атрибутов Под конец прошлого года я рассказывал об API пользов…
  3. Sep 14, 2026Подклассы Event вместо CustomEvent Многие библиотеки предоставляют систему событий в качес…
  4. Sep 11, 2026Эволюция стилей в темах Shopify Адам Ватан на днях поделился новостью, что Shopify выкупил…
  5. Sep 9, 2026Persistent Widgets Многие сайты не должны быть SPA. Но иногда эта архитектура продиктована…
  6. Sep 7, 2026Processing Instructions и маркеры В DOM всё представлено в виде узлов (Node) разных типов.…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →