DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

John Peters
John Peters

Posted on • Updated on

Material Table II in 20 Minutes (Styling)

In our previous article, we demonstrated how to wire up a Material Table to a JSON file (containing articles), and a paginator; which, looks like this:

Alt Text

Changing the Style of the Rows

We didn't like the lines on each row and found the root cause to be the default style from MatTable.

Alt Text

Let's get rid of the lines by adding this to our page's css.

th.mat-header-cell,
td.mat-cell,
td.mat-footer-cell {
  border-bottom-width: 0px;  
}
Enter fullscreen mode Exit fullscreen mode

Ok now let's change the default a:hover behavior and get rid of the typical underscore.

a {
  cursor: pointer;
  border-radius: 5px;
  position: relative;
  padding-left: 0.5em;
  padding-right: 1em;
  padding-bottom: 0.1em;
  text-decoration: none;
}

a:hover {
  box-shadow: inset 0px -7px 15px #1976d255;
}
Enter fullscreen mode Exit fullscreen mode

Results

No more lines, and a soft inset box shadow following our theme color! This is what it looks like in action.

Alt Text

Search

The matTable datasource has these properties:

Alt Text

In our next article we will show how to tie into these properties to provide automatic (and mostly instant) searches. We'll also explore the sortData function.

JWP2020

Top comments (0)

Why You Need to Study Javascript Fundamentals

The harsh reality for JS Developers: If you don't study the fundamentals, you'll be just another β€œCoder”. Top learnings on how to get to the mid/senior level faster as a JavaScript developer by Dragos Nedelcu.