Регулировка ширины столбцов mat-table в Angular: решение

Быстрый ответ

Ширину колонки в mat-table на Angular можно установить с использованием CSS, присваив класс с уникальным именем, соответствующим наименованию колонки, элементам mat-header-cell и mat-cell.

/* Установим ширину колонки "имя пользователя" равной 120 пикселям */
.mat-column-username {
  width: 120px; 
}

Примените этот класс в определении таблицы:

<ng-container matColumnDef="username">
  <th mat-header-cell *matHeaderCellDef class="mat-column-username">Имя пользователя</th>
  <td mat-cell *matCellDef="let element" class="mat-column-username">{{element.username}}</td>
</ng-container>

Таким образом, ширина колонки с именем пользователя будет постоянной и равной 120 пикселям.

Настройка mat-таблиц с колонками разной ширины

Разберём различные подходы к регулированию ширины колонок в mat-table.

Адаптивные колонки с использованием Flex

Создавайте адаптивный дизайн, используя процентные значения для настройки ширины через свойство flex в CSS.

/* Колонка "вес" займёт 25% ширины таблицы */
.mat-column-weight {
  flex: 0 0 25%;
}

Подробнее об этом расскажет наш спикер на видео

Контроль над содержимым при переполнении

Чтобы предотвратить нарушение макета таблицы из-за чрезмерного текста, используйте свойства CSS word-wrap или white-space.

/* Текст в колонке "описание" ограничен шириной в 250 пикселей */
.mat-column-description {
  width: 250px;
  overflow-wrap: break-word;
  white-space: normal;
}

Решение для длинных слов: использование переносов

Свойство hyphens поможет разбить длинные слова на части.

/* Длинные слова в колонке "название продукта" будут переноситься */
.mat-column-productname {
  hyphens: auto;
}

Поддержание единообразия и чёткости макета

Для сохранения чёткости макета используйте table-layout и width, чтобы колонки в mat-table были организованным отображением данных.

/* Задаёт вашей mat-table ширину, равную 100% доступной, без искажений */
.mat-table {
  table-layout: fixed;
  width: 100%;
}

Индивидуализация стилей колонок

Создавайте уникальные CSS-классы для каждого типа колонки.

/* Колонка "цена" с фоном серебристого цвета выделяется среди всех */
.mat-column-price {
  width: 80px;
  background-color: #f3f3bc;
}

Визуализация

Восприятие вашей mat-table можно уподобить гоночному треку, на котором расположены дорожки (колонки) разной ширины.

| Гоночный трек Mat-Table |       |
| ------------------------ | ----- |
| Фиксированная дорожка    | 100px |
| Гибкая дорожка           | auto  |
| Дорожка минимальной ширины | 50px  |

Стили для колонок:

.mat-column-yourColumnName {
  width: 100px;    // Фиксированная дорожка: обгон невозможен!
  min-width: 50px; // Дорожка минимальной ширины: безопасность превыше всего!
  max-width: 200px; // Дорожка максимальной ширины: избегаем экстрима!
  flex: 0 0 auto;  // Гибкая дорожка: для маневров!
}

Присоединяйтесь к гонке!

Адаптация под разные экраны

Создавайте стили с учётом различных размеров экранов, используя проценты или медиазапросы.

/* Дружественная настройка для мобильных устройств */
@media screen and (max-width: 600px) {
  .mat-column-mobile {
    width: 50%;
  }
}

Порядок и структурированность стилей с помощью SCSS

Для поддержания порядка в стилях используйте миксины SCSS.

/* Уменьшает повторение кода и облегчает поддержку проекта */
@mixin column-width($width) {
  width: $width;
  flex: none;
}

.mat-column-quantity {
  @include column-width(150px);
}

Интеграция шаблонов и стилей с Angular Material

Предопределённые классы Angular Material и директивы облегчают взаимодействие между CSS и Angular.

<ng-container matColumnDef="item">
  <th mat-header-cell *matHeaderCellDef class="mat-column-item">Позиция</th>
  <td mat-cell *matCellDef="let element" class="mat-column-item">{{element.item}}</td>
</ng-container>

Полезные материалы

1. Официальная документация Angular Material UI Library — раздел посвящен настройке колонок в mat-table.
2. Полное руководство по тегу Table от CSS-Tricks — подробно объясняет работу с HTML-таблицами и методы их стилизации.
3. API-документация angular/flex-layout — материал по созданию адаптивной сетки и настройке колонок в Angular.
4. Детальный пример использования Angular Material Data Table — реальные примеры использования и возможностей в действии.
5. Базовое руководство по HTML-таблицам на w3schools — основы работы со структурой таблиц.
6. «Трекер проблем» Angular Components на GitHub — позволяет найти готовые решения и обсудить вопросы, связанные с таблицами.