🎅Всем привет! С вами Роза, Flutter dev Friflex

Все мы привыкли использовать Column, Row, ListView и различные layout-виджеты. Но как часто в проектах вы сталкивались с таблицами и использовали для этого виджет Table? Табличную структуру можно реализовать через комбинацию Column + Row + ListView. Иногда это оправдано, но не всегда — иногда лучше использовать специально предназначенные для этого инструменты.

Во Flutter для работы с таблицами есть несколько виджетов:

✔️ PaginatedDataTable — для работы с большими таблицами с поддержкой постраничной навигации. Используется для больших таблиц, где можно  управлять сортировкой и переходами между страницами данных

PaginatedDataTable(
  header: Text('Список пользователей'),
  columns: const [
    DataColumn(label: Text('ID')),
    DataColumn(label: Text('Имя')),
    DataColumn(label: Text('Email')),
  ],
  source: myDataSource, // DataTableSource
  rowsPerPage: 10,
)

Для сортировки таблицы используются параметры sortColumnIndex (номер колонки) и sortAscending (направление сортировки), а обработка самой сортировки выполняется через onSort.

✔️ DataTable – для небольших или заранее известных наборов данных. Строки добавляются динамически из моделей, что упрощает масштабирование

Пример с моделью User:

DataTable(
  columns: const [
    DataColumn(label: Text('ID')),
    DataColumn(label: Text('Имя')),
    DataColumn(label: Text('Email')),
  ],
  rows: users.map((user) {
    return DataRow(cells: [
      DataCell(Text(user.id.toString())),
      DataCell(Text(user.name)),
      DataCell(Text(user.email)),
    ]);
  }).toList(),
)

✔️ Table — дает полный контроль над структурой строк и столбцов. Каждая строка создается черезRow, ListVie а каждая ячейка может содержать любой виджет или комбинированный UI.

Table(
  border: TableBorder.all(color: Colors.black26), // границы таблицы
  columnWidths: { // ширина столбцов
    0: FlexColumnWidth(2),
    1: FlexColumnWidth(3),
  },
  children: [ // список строк
    TableRow(children: [ // каждая строка с набором виджетов
      Text('ID', textAlign: TextAlign.center),
      Text('Имя', textAlign: TextAlign.center),
    ]),
    TableRow(children: [
      Text('1', textAlign: TextAlign.center),
      Row(children: [Icon(Icons.person), Text('Алексей')]),
    ]),
    TableRow(children: [
      Text('2', textAlign: TextAlign.center),
      Row(children: [Icon(Icons.person), Text('Мария')]),
    ]),
  ],
)

Через columnWidths можно управлять шириной столбцов:
▫️ FixedColumnWidth — фиксированная ширина
▫️ FlexColumnWidth – пропорциональная
▫️ IntrinsicColumnWidth – по содержимому
    
⚠️ Внутри ячеек Table нельзя использовать Expanded, так как отрисовка и размеры управляются самим виджетом.
Table удобно использовать для кастомных макетов, где важны выравнивание ячеек, ширина столбцов и границы. Каждая строка состоит из набора виджетов, что облегчает управление макетом и сохраняет структуру данных.

При работе с таблицами есть несколько нюансов:
✔️IntrinsicColumnWidth заставляет Flutter делать два прохода при компоновке: сначала измерить все элементы, затем отрисовать. Если строк сотни — интерфейс может начать тормозить. По возможности лучше использовать FlexColumnWidth
✔️Адаптивность на маленьких экранах. Таблица подстраивается под ширину экрана, но на небольших устройствах может быть трудночитаема. В таких случаях стоит использовать горизонтальный скролл или адаптивный макет
✔️ Динамическая высота строк. Если содержимое ячеек часто меняется (например, при загрузке данных, анимациях или использовании ExpansionTile), Table может стать узким местом. Для таких случаев иногда удобнее использовать комбинацию ListView + Row/Column
✔️Использование Row/Column + ListView оправдано, если у вас простой список элементов, строки сильно различаются по содержимому или нужен вертикальный скролл без необходимости выравнивания колонок

На этом все! ❤️ всем любителям табличек