How to get mounted() render table dynamic base on device?

Questions
1

Hi, i have called at mounted of a page as follow,
image

but as u notice the displayItemRow( … ) function,

image
image726×625 76.2 KB

so my issue is that when it is on a mobile device, it displays fine.
image

but when it displays in a bigger screen size, i.e. desktop browser,

image
image1664×456 21.3 KB

now my issue is that i do not know how to get the column to hide when i m
in a device mode and when i am on a desktop , the table should show more
columns,

and i know, we can detect device to display differently but is there a good practice
of doing this?

and also the table header and the table row , suppose to align as per the label-numeric
and label-cell but not sure why , if u check my image above, the label, not sure
what to do , in my context to align with the values of the row , column by
column ?

appreciate any input or advice ,

thanks.
kalmen