Angular Material Tutorial - 28 - Exploring Data table

Codevolution
22 Apr 201905:08

Summary

TLDRThis video script delves into the intricacies of data tables in Angular Material, focusing on the 'displayed columns' property which controls both the visibility and order of columns. It emphasizes the importance of the column templates' order and the 'mat-column-definition' attribute for proper data table rendering. Additionally, it discusses the 'mat-row' component for handling events and accessing raw data, demonstrating how to log row data and suggesting its use for actions like editing or navigating. The script concludes by hinting at further topics like filtering, sorting, and pagination.

Takeaways

  • 📊 The 'displayedColumns' property controls which columns are shown in an Angular Material data table, and is defined as an array of strings.
  • 🔄 The order of the fields in 'displayedColumns' determines the order in which the columns appear in the browser, maintaining the same sequence.
  • 🔄 Changing the order of 'displayedColumns' affects both the header and data columns' order in the table.
  • 📦 Rearranging the 'displayedColumns' array, such as moving 'weight' to the end, will reflect in the browser by displaying 'weight' as the last column.
  • 🏗️ The order of 'ng-container' tags in the HTML template does not affect the column order; 'displayedColumns' property is the key controller.
  • 📌 The 'mat-column-definition' attribute in 'ng-container' must match a value from 'displayedColumns'; incorrect values will break the table.
  • 🔍 'mat-row' component provides access to raw data and allows handling events on each row, such as click event bindings.
  • 📝 In the component class, a method can be defined to handle row events, like 'logData', which logs the row data to the console.
  • 🔄 'displayedColumns' can be manipulated to show different data for the header and the data rows, although it's uncommon.
  • 🎯 Actions such as editing, deleting, or navigating based on row data can be performed by passing and extracting relevant information from the data.
  • 🚦 Filtering, sorting, and pagination features in data tables are not covered in this script and will be discussed in subsequent videos.

Q & A

  • What is the purpose of the displayed columns property in Angular Material data tables?

    -The displayed columns property in Angular Material data tables controls which columns are shown in the browser. It is an array of strings that represents the names of the columns to be displayed.

  • How does the order of fields specified in the displayed columns array affect the data table?

    -The order of fields specified in the displayed columns array directly affects the order in which the columns are displayed in the browser. The columns will appear in the browser in the exact same sequence as they are listed in the array.

  • Can the order of column templates with the ng-container tag affect the order of columns in the data table?

    -No, the order of column templates with the ng-container tag does not affect the order of columns in the data table. The order is strictly controlled by the displayed columns property assigned to the mat-header-row and mat-row components.

  • What is the significance of the mat-column-definition attribute in the container column template?

    -The mat-column-definition attribute in the container column template is crucial as its value must correspond to a value from the displayed columns property. If the attribute is set to an incorrect column name, the data table will not display properly and may break.

  • How can we handle events on each row of the data table using the mat-row component?

    -We can handle events on each row of the data table using the mat-row component by adding event bindings, such as click events. We can then call a method that provides us with the raw data of the row, allowing us to perform actions like editing, deleting, or navigating based on the data.

  • What is the difference between the columns and displayedColumnsData properties in the class component?

    -The columns property is set to the displayed columns array, which indicates what data should be displayed. The displayedColumnsData property, on the other hand, can be used to create a separate set of columns to be displayed, different from the header columns, allowing for more flexibility in how data is presented.

  • How can we display a different set of columns for the header and the data in Angular Material data tables?

    -We can display a different set of columns for the header and the data by setting separate arrays for the mat-header-row and mat-row components. The mat-header-row would use one set of columns, while the mat-row component would use another, as defined by the displayedColumnsData property.

  • What happens if a non-existent column name is used in the mat-column-definition attribute?

    -If a non-existent column name is used in the mat-column-definition attribute, the Angular Material data table will not display correctly. It may break or throw an error, as the application will not be able to find a matching column in the displayed columns array.

  • How can we change the order of columns in the data table?

    -To change the order of columns in the data table, we need to reorder the strings in the displayed columns array. The columns will be displayed in the browser in the same order as they appear in this array.

  • What is the role of the mat-row component in handling row events?

    -The mat-row component is used to get hold of the raw data associated with each row in the data table. By using this component, we can handle events such as clicks, and perform actions like editing, deleting, or navigation based on the data associated with that specific row.

  • How does the 'logData' method work in the context of the data table?

    -The 'logData' method is defined in the component class to accept a row as a parameter. When a row is clicked, this method is called with the corresponding row data as an argument, and it logs this data to the console. This allows developers to perform further actions based on the logged data.

  • What are some actions that can be performed based on row data in Angular Material data tables?

    -Based on row data, actions such as editing, deleting, or navigating to a different route can be performed. Developers can extract specific information like an ID from the row data and use it to carry out the necessary actions within the application.

Outlines

00:00

📊 Understanding Angular Material Data Tables

This paragraph delves into the intricacies of data tables in Angular Material, starting with the 'displayed columns' property. It explains how this property, an array of strings, dictates which columns are shown in the browser. The order of the strings in the array determines the order of the columns displayed. The paragraph also touches on the importance of the 'mat-column' definition attribute in the column templates, which must match values from the 'displayed columns' property for the data table to function correctly. Additionally, it discusses the 'mat-row' component and its role in handling events on each row, such as click events to retrieve and log raw data.

05:00

🎥 Video Conclusion and Future Discussion

The paragraph concludes the video with a prompt for viewers to subscribe and a teaser for the next video. It does not contain technical content but serves as a closing remark, encouraging viewers to continue their engagement with the content and look forward to upcoming topics, such as filtering, sorting, and pagination in data tables.

Mindmap

Keywords

💡Data Tables

Data tables are a visual representation of data in a tabular format, typically used to organize and display information in rows and columns. In the context of the video, data tables are utilized within Angular Material to manage and present data effectively on a web page. The script discusses how to control the display and order of columns within a data table, highlighting the importance of this for user experience and data accessibility.

💡Angular Material

Angular Material is a UI framework based on Angular, designed to create responsive and mobile-friendly applications. It provides a set of pre-built UI components, including data tables, which can be easily integrated into applications to enhance their user interface. The video focuses on using Angular Material's data tables to display and manage data efficiently.

💡Displayed Columns

The 'displayed columns' property in Angular Material's data tables refers to the specific columns that are shown in the browser. It is an array of strings that determines which fields are presented to the user and in what order. This property is crucial for customizing the data table's appearance and functionality to meet the needs of the application and its users.

💡Column Order

Column order refers to the sequence in which columns are arranged in a data table. In Angular Material, the order is dictated by the 'displayed columns' property, ensuring that the columns are displayed in the browser in the exact sequence specified. Proper column order can enhance readability and usability, making it easier for users to find and interpret data.

💡ng-container Tag

The 'ng-container' tag in Angular is a structural directive that acts as a container without adding any additional meaning or presentation. It is often used with Angular Material components, like the data table, to group elements together. In the context of the video, it is used with column templates, but the order of these containers does not affect the order of the columns in the data table, which is controlled by the 'displayed columns' property.

💡mat-column-definition

The 'mat-column-definition' attribute is used in Angular Material to define a column in a data table. Its value must correspond to a string in the 'displayed columns' property. This attribute is essential for associating the data in the table with the correct column header and ensuring that the data is displayed correctly.

💡mat-row Component

The 'mat-row' component in Angular Material is used to define a row in a data table. It works in conjunction with other properties and components to display data and handle user interactions. The component allows developers to access raw data and manage events for each row, such as click events, which can trigger actions like editing, deleting, or navigating based on the selected row.

💡Row Data

Row data refers to the specific set of information that is displayed in a single row of a data table. In the context of the video, row data is accessed through the 'mat-row' component and can be used to perform actions such as editing, deleting, or navigating to a different route when a user interacts with that row.

💡Filtering

Filtering is a feature in data tables that allows users to narrow down the displayed data based on specific criteria. This functionality helps users to focus on relevant information by excluding data that does not meet the set filters. Although not explicitly detailed in the video script, filtering is a common feature in Angular Material data tables and is essential for managing large datasets.

💡Pagination

Pagination is the process of dividing a large data set into smaller, manageable groups or 'pages'. This feature is particularly useful when dealing with extensive data tables, as it allows users to navigate through the data without being overwhelmed by the volume. Although not covered in detail in the video script, pagination is a standard functionality in Angular Material data tables that improves user experience by making data more accessible.

💡Customization

Customization refers to the ability to modify or adjust the appearance and behavior of a component or system to better suit specific needs or preferences. In the context of the video, customization is a key theme as the script demonstrates how to customize Angular Material's data tables by controlling the displayed columns, their order, and the way user interactions are handled.

Highlights

Exploring data tables in Angular Material with a focus on the displayed columns property.

The displayed columns property is an array of strings that controls which columns are shown in the browser.

Removing a column from the displayed columns array results in that column not being displayed in the browser.

The order of the fields in the displayed columns array dictates the order of the columns in the browser.

Changing the order of the displayed columns array affects the order of columns in the browser, such as moving the weight column to the last position.

The order of column templates with the ng-container tag does not affect the column order, which is solely controlled by the displayed columns property.

The mat-column-definition attribute must have a value from the displayed columns property for the data table to function correctly.

The mat-row component allows access to raw data and handling events on each row in the data table.

Adding a click event binding to a row allows for triggering methods that provide the raw data of that row.

In the component class, the logData method can be used to console.log the data of a clicked row.

The data table in Angular Material can be used for actions such as editing, deleting, or navigating based on row data.

It is possible to set separate columns to be displayed for the header and the data, although it may not be a common practice.

The video provides insights into filtering, sorting, and pagination in data tables within Angular Material.

The video aims to enhance understanding of how data tables function in Angular Material.

The presenter encourages viewers to subscribe for more content on Angular Material and related technologies.

Transcripts

00:00

in this video let's take a more detailed

00:02

look at data tables in angular material

00:05

let's start with the displayed columns

00:09

property this property as the name

00:12

suggests controls the columns to be

00:15

displayed in the browser as you can see

00:18

it is just an array of strings if I were

00:22

to for example remove symbol from this

00:25

list

00:27

take a look at the browser the column is

00:31

not displayed so the property controls

00:35

which of the columns have to be shown

00:37

but there is more to it than just

00:40

showing and hiding of columns the order

00:44

in which you specify the fields to be

00:47

displayed is the order in which the

00:49

columns are displayed in the browser you

00:52

can see that we have the order as

00:54

position name weight and symbol and in

00:59

the browser the columns are in the exact

01:02

same order physician name weight and

01:07

symbol if you want the weight column to

01:11

be the last column you just have to

01:13

specify the weight column as the last

01:15

column in displayed columns property so

01:18

I'm going to cut this out

01:23

and paste it after symbol if I now go

01:27

back to the browser

01:28

weight is displayed as the last column

01:32

which now brings me to the HTML to

01:35

highlight another point the order in

01:39

which you specify these column templates

01:41

with the ng container tag doesn't affect

01:44

the order in any way whatsoever the

01:48

order is controlled by the displayed

01:50

columns property which is specified to

01:53

the map header row and mat row

01:56

components but what does matter with the

02:00

container column template is the mat

02:03

column definition attribute the value

02:06

has to be a value from the displayed

02:08

columns property if I've already changed

02:12

position to let's say position test same

02:17

and take a look at the browser you can

02:20

see that the code breaks and the data

02:22

table is not displayed so make sure you

02:26

specify the right column name to the

02:28

template next let's talk about the mat

02:32

row component you can see that we have

02:35

two variables declared row and columns

02:38

the columns property is set to displayed

02:42

columns to indicate what data has to be

02:45

displayed it's change this and see what

02:48

happens so in the class component I'm

02:50

going to create another property called

02:54

displayed columns data and in this list

02:59

I'm going to remove weight also back in

03:02

the HTML I'm going to set columns to

03:06

display columns data if you now take a

03:10

look at the browser you can see that we

03:13

have only three columns of data being

03:15

displayed and four columns of header the

03:19

data for the weight column is hidden so

03:23

it is very much possible to set separate

03:25

columns to be displayed for the header

03:28

and the data but then again not sure if

03:31

you would ever want to do that next

03:34

let's talk about the road

03:37

what this helps us with is to get hold

03:41

of the raw data to handle events on each

03:44

row in that data table

03:46

for example I can add a click event

03:49

binding

03:51

and call a method that provides us with

03:54

the raw data let's call this log data

03:57

and pass in that row variable now in the

04:03

component class we can quickly define

04:06

log data accepts a row and let's just

04:11

console.log it if I save the files and

04:15

take a look at the browser open console

04:18

and click on a row you can see the

04:23

corresponding row data being logged in

04:25

the console so if you have any action

04:29

that has to be performed for example

04:31

editing deleting or navigating to a

04:35

different route based on this row data

04:37

this is the way to go pass in the data

04:41

extract the ID probably of that column

04:45

and perform the necessary action alright

04:49

then I hope that now you have a much

04:51

better understanding of how a data table

04:54

works in angular material next let's

04:57

take a look at filtering salting and

05:00

pagination in data tables thank you guys

05:03

for watching

05:04

you're free to subscribe I'll see you

05:05

guys in the next video

Rate This

5.0 / 5 (0 votes)

Related Tags
AngularMaterialDataTablesFrontendDevelopmentColumnManagementDataDisplayOrderingFilteringng-containerEventHandlingCodeTutorial