Mat Table Example: 10+ CodeSandbox Demos for Beginners
23.02.2026 ... A complete example of an Angular Material Data Table with server-side pagination, sorting, filtering, as well as a loading indicator....
In the realm of data manipulation and analysis, the Mat table, or Material Design table, has become a staple for creating responsive and visually appealing tables. This component, part of the Material Design system, offers a clean and efficient way to display data in web applications. Let's dive into a comprehensive example of a Mat table, exploring its features, customization, and best practices.
Understanding the Mat Table
The Mat table is a robust and flexible component that allows you to display data in a tabular format. It's designed to be responsive, meaning it adjusts its layout based on the available space, providing an optimal viewing experience on various devices. The table consists of rows and columns, with each cell containing data. It also supports features like sorting, pagination, and filtering, enhancing user interaction.
Setting Up a Basic Mat Table Example
To get started with a Mat table, you'll need to include the Material Design library in your project. For this example, we'll use the Angular Material library, which is a comprehensive suite of Angular components based on Material Design.
Position
Name
Weight
{{hero.id}}
{{hero.name}}
{{hero.weight}}
In the above example, we've created a simple Mat table displaying data from an array of heroes. Each hero has properties for 'id', 'name', and 'weight', which are displayed in the respective columns.
Customizing the Mat Table
Material Design tables can be customized to fit your application's needs. Here are a few ways to customize the Mat table:
- Striped Rows: Add the `mat-row` directive with the `stripe` input to create striped rows.
- Fixed Header: Use the `mat-table` directive with the `fixedHeader` input to keep the header fixed while scrolling.
- Sorting: Implement sorting functionality by using the `MatSort` directive and handling the sort event in your component.
Responsive Design and Pagination
Mat tables are responsive by default, but you can also control the behavior manually. For instance, you can use the `mat-table` directive with the `fixedLayout` input to prevent the table from becoming scrollable when it overflows its container.
Pagination is another useful feature that allows users to navigate through large datasets. The `MatPaginator` component can be used in conjunction with the `MatTableDataSource` to implement pagination in your table.
Accessibility Considerations
When working with Mat tables, it's crucial to consider accessibility. Here are a few best practices:
- Provide clear and concise headers for each column.
- Use the `aria-label` attribute to describe the table's purpose.
- Ensure sufficient color contrast between text and background.
By following these guidelines, you can create Mat tables that are both visually appealing and accessible to all users.
<strong>Angular Material Data Table: A Complete Example</strong><p>23.02.2026 ... A complete example of an Angular Material Data Table with server-side pagination, sorting, filtering, as well as a loading indicator.</p>
<strong>Simple Angular mat-table example - StackBlitz</strong><p>Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.</p>
<strong>Angular Material UI component library</strong><p>UI component infrastructure and Material Design components for mobile and desktop Angular web applications.</p>
<strong>Angular Material Table: A Complete Guide with Best Example</strong><p>25.06.2024 ... We'll dive into Angular Material tables in this blog article, covering various table kinds, creating and customizing them, and implementing advanced features ...</p>
<strong>Editable Angular Material Table with filtering, sorting and paging</strong><p>07.11.2024 ... <table mat-table matSort matSortDirection ... We create a FormArray using the provided sample data and assign it to a FormGroup for template ...</p>
<strong>Angular Material Table Tutorial with API Data - YouTube</strong><p>25.09.2021 ... If you liked the content, please consider checking out my Patreon! - https://www.patreon.com/CodingUnderPressure/membership In this video, ...</p>
<strong>components/src/material/table/table.md at main - GitHub</strong><p>The mat-table provides a Material Design styled data-table that can be used to display rows of data. This table builds on the foundation of the CDK ...</p>
<strong>Multiple mat-tables and multiple different dataSources in one ...</strong><p>01.12.2022 ... You can select the table by its template reference @ViewChild('TemplateRef') - https://angular.io/api/core/ViewChild#description.</p>
<strong>Understanding Angular Material Table Inputs - DEV Community</strong><p>02.10.2019 ... Directive mat-table has a dataSource input which can be an array, an Observable array, or a DataSource instance. A <table mat-table [dataSource] ...</p>
<strong>How to use Angular Mat-table? - Reddit</strong><p>25.10.2020 ... @ Component ({ selector: 'table-overview-example', styleUrls: ['table ... read the doc and the sample code for mat-table please. https ...</p>
<strong>How to migrate to the Material Table - PlentyONE developers</strong><p>The Angular Material Table offers many useful functionalities, such as pagination or sorting. Moreover, you can easily add inputs into the columns and it ...</p>
<strong>Angular Material Data Table - Complete Example (with Simplified ...</strong><p>15.10.2021 ... Angular Material Data Table - Complete Example (with Simplified DataSource). 13K views · 4 years ago ...more. Angular University. 53K.</p>
<strong>Creating a Dynamic View and Material Table in Angular - Medium</strong><p>07.03.2020 ... MatTable Template. First, let's look at how we're going to define the MatTable in the template through a quick compare and contrast. Hard ...</p>
<strong>Angular Material Table - GeeksforGeeks</strong><p>23.07.2025 ... Material Table is a data table to display data in tabular format. It can be created using <table mat-table>. It displays complex data in a visually simple ...</p>
<strong>Material Table Explained - DEV Community</strong><p>10.04.2020 ... A minimal example to get you up and running fast... <table mat-table [dataSource]="collection"&... Tagged with angular, material.</p>
<strong>create a material looking table (withOUT dataTable) #3805 - GitHub</strong><p>27.03.2017 ... Maybe this example should be added to the official angular material documentation. Just demonstrate a solution without data source. Update.</p>
<strong>angular - Should I use "<table mat table ... " or ... - Stack Overflow</strong><p>10.04.2019 ... <mat-table> uses display flex. Look at the first two example: material.angular.io/components/table/examples In my case, for something like ...</p>
<strong>Angular Material Table Img In Cells - StackBlitz</strong><p>File a bug! table-basic-example.html. Format Document. Split Editor. More ... <table mat-table [dataSource]="dataSource". class="mat-elevation-z8 ...</p>
<strong>Data Table with MatTableModule - YouTube</strong><p>28.10.2025 ... Data Table with MatTableModule in Angular Material 19. https://www.youtube.com/playlist?list=PLV-DQnYj14bQKrXZ8cBYbCWi-oulSHZ7m .</p>
<strong>Data Table with Pagination and Sorting: Angular Material - Dhrubo Dh</strong><p>03.03.2021 ... For example, I wanted to sort my table data by the user's Last Name so I added the mat-sort-header directives to the last name column header ...</p>
