Angular Material Tutorial - 28 - Exploring Data table

in this video let's take a more detailed

look at data tables in angular material

let's start with the displayed columns

property this property as the name

suggests controls the columns to be

displayed in the browser as you can see

it is just an array of strings if I were

to for example remove symbol from this

list

take a look at the browser the column is

not displayed so the property controls

which of the columns have to be shown

but there is more to it than just

showing and hiding of columns the order

in which you specify the fields to be

displayed is the order in which the

columns are displayed in the browser you

can see that we have the order as

position name weight and symbol and in

the browser the columns are in the exact

same order physician name weight and

symbol if you want the weight column to

be the last column you just have to

specify the weight column as the last

column in displayed columns property so

I'm going to cut this out

and paste it after symbol if I now go

back to the browser

weight is displayed as the last column

which now brings me to the HTML to

highlight another point the order in

which you specify these column templates

with the ng container tag doesn't affect

the order in any way whatsoever the

order is controlled by the displayed

columns property which is specified to

the map header row and mat row

components but what does matter with the

container column template is the mat

column definition attribute the value

has to be a value from the displayed

columns property if I've already changed

position to let's say position test same

and take a look at the browser you can

see that the code breaks and the data

table is not displayed so make sure you

specify the right column name to the

template next let's talk about the mat

row component you can see that we have

two variables declared row and columns

the columns property is set to displayed

columns to indicate what data has to be

displayed it's change this and see what

happens so in the class component I'm

going to create another property called

displayed columns data and in this list

I'm going to remove weight also back in

the HTML I'm going to set columns to

display columns data if you now take a

look at the browser you can see that we

have only three columns of data being

displayed and four columns of header the

data for the weight column is hidden so

it is very much possible to set separate

columns to be displayed for the header

and the data but then again not sure if

you would ever want to do that next

let's talk about the road

what this helps us with is to get hold

of the raw data to handle events on each

row in that data table

for example I can add a click event

binding

and call a method that provides us with

the raw data let's call this log data

and pass in that row variable now in the

component class we can quickly define

log data accepts a row and let's just

console.log it if I save the files and

take a look at the browser open console

and click on a row you can see the

corresponding row data being logged in

the console so if you have any action

that has to be performed for example

editing deleting or navigating to a

different route based on this row data

this is the way to go pass in the data

extract the ID probably of that column

and perform the necessary action alright

then I hope that now you have a much

better understanding of how a data table

works in angular material next let's

take a look at filtering salting and

pagination in data tables thank you guys

for watching

you're free to subscribe I'll see you

guys in the next video