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:

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.

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;  
}

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;
}

Results

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

Search

The matTable datasource has these properties:

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