Angular Material Tutorial - 27 - Data table

all right in this video let's take a

look at implementing a basic data table

in angular material the first step as

always is to import the module so in

material dot module dot es import mat

table module and added to the material

array

now what we are going to do to save us

some time is copy the code for a basic

data table and then understand the

different parts that are responsible for

the functioning of a data table so in

the material Doc's go to components and

then to the data table section and click

on the table link over here in the

examples tab we have a basic data table

now go to the second example

which is basic use of math table and

uses display flex and click on the code

icon now let's copy paste the code first

the HTML so copy and paste it in AB

component dot HTML next the typescript

file so go to TS copy the interface and

the data in AB component TS paste it

right after the import statement then go

back to the documentation and copy the

two lines of code from the component

class go back to BS code and in app

component paste them finally copy the

CSS so we're here CSS and then copy this

and paste it in AB component dot CSS now

if we save all the files and take a look

at the browser you should be able to see

a data table now let's understand the

different parts that make up this data

table the first part to implementing a

data table is the data source every data

table needs a data source that contains

the data to be displayed in our example

we have the data of periodic elements we

have an interface that defines the type

of

each element so a periodic element will

have a name position rate and symbol

right below the interface is where you

see the array of periodic elements we

have ten elements each having properties

mentioned in the interface what you have

to notice here is that the interface and

the data array is declared outside the

component to be able to use it in the

component we need to create a property

and initialize it for that purpose we

have data source which is initialized to

element data this array right here

alright the next thing to do is to

provide this data source to the data

table and we do that in the HTML so in

am dot component dot HTML we create a

data table with mat table component and

to provide the data source they make use

of the data source attribute we use

property binding to bind the property

defined in the component class so data

source is equal to element data which is

provided here so that is the first step

to implementing a data table creating

the data source and binding it to the

table the second step is to define the

column templates in the browser you can

see that we have four columns the

position number name weight and symbol

in the code we define the four columns

each inside its own ng container element

physician name weight and symbol the ng

container element will not be rendered

to the Dom but it will provide an

element for applying this mat column def

directive the mat column death directive

is what uniquely identifies a given

column with a key physician named way

and symbol inside the ng container

element we will have all the

configuration for a given column you can

see that we have the template that

defines how to display the header for a

given column identified using the map

header cell death structural directive

we also have another template that

defines how to display the data cells of

a given column using the mat cell def

structural directive the to structural

directives do not attach any styling to

the elements the styling is taken care

of by mat header cell and mat cell

components next let's talk about the

content of the heading and the data

cells for the heading you can see that

we just have static text number name

weight and symbol but for the data cell

we get access to each row of the data

source we obtain a reference to each row

and then access the different properties

of each row we then use interpolation to

bind the data to the view so in our data

source we have ten rows we iterate

through the rows get a reference to each

row and store it in the element variable

and then we access the appropriate

property in the column template so

element dot position dot name dot weight

in dot symbol these are the different

properties for each element

all right now what we have done so far

is just define the column template how

it's supposed to look the final step is

to define the rows in the data table and

for that we make use of two more

components to define the table header

row we make use of the mat header row

component and to determine which columns

have to be displayed in the table mat

header row death structural directive is

used to this we assign displayed columns

property which is an array of columns we

have mentioned in the component class so

display columns is an array of strings

with positioned name weight and symbol

similarly to display the data rows we

make use of the mat rope component now

with mat Perot death structural

directive we also have a variable

exported that we have named as row

containing the data of that given row

and we have to specify the columns

property which contains the order in

which the data cells should be rendered

again this is displayed columns property

so when you run this code we should have

the data table working as expected

position name weight and symbol and then

the different rows corresponding to each

entry or each item in the element array

so to summarize there are three steps in

implementing a data table in angular

material first up define the data source

and the columns to be displayed second

step define the column templates and

finally the third step include the

header and the row definitions so we are

able to create a very basic data table

we copy pasted the code and did not

really code anything as such so in the

next video let's also try to make some

changes and see how that impacts the

data table that will give you guys a

much better idea of how the data table

works I will see you guys in the next

video