DEV Community

JWP
JWP

Posted on • Edited on

2

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)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!