Svelte: How to Dynamically change the CSS Style of a table component

Photo by Ricardo Gomez Angel on Unsplash

In a previous article, a table was created using this Svelte REPL. If you want to check that out before, feel free:

Svelte: How to create a Dynamic Table Component

Despite that, you can just skip that reading and apply what we’ll discuss here in any HTML table that you want, just remember that any reference to files and tables points towards that article. Also, the CSS used here was generated using Divtable, an awesome website, which generated the CSS code that was applied to our tables.

Changing the Style

To do that, in the Table.svelte file, we will create and export a variable that will receive the name of the class that we’ll pass to our table. A class name is an identifier of an element. By doing this, we can separate different elements in a document. Also, in the same file, we’ll create two different styles to choose from, and apply them to the table according to its values. To choose between them, the table class will receive a variable with the name of the style that we want to apply to it. After that, in the App.svelte, We’ll create a variable, with the name of one of the styles that we created, and pass it to the <Table/> element. The code should look something like this:

• Creating the table styles:

Table.svelte

<style>
 table, th, td {
  border: 1px solid;
  border-collapse: collapse;
  margin: 10px;
  
 }
 
 table.redTable {
  border: 2px solid #A40808;
  background-color: #EEE7DB;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
 }
 table.redTable td, table.redTable th {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
 }
 table.redTable tbody td {
  font-size: 13px;
 }
 table.redTable tr:nth-child(even) {
  background: #F5C8BF;
 }
 table.redTable thead {
  background: #A40808;
  background: -moz-linear-gradient(top, #bb4646 0%, #ad2020 66%, #A40808 100%);
  background: -webkit-linear-gradient(top, #bb4646 0%, #ad2020 66%, #A40808 100%);
  background: linear-gradient(to bottom, #bb4646 0%, #ad2020 66%, #A40808 100%);
 }
 table.redTable thead th {
  font-size: 19px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #A40808;
 }
 table.redTable thead th:first-child {
  border-left: none;
 }
table.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
 }
 table.blueTable td, table.blueTable th {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
 }
 table.blueTable tbody td {
  font-size: 13px;
 }
 table.blueTable tr:nth-child(even) {
  background: #D0E4F5;
 }
 table.blueTable thead {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
 }
 table.blueTable thead th {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
 }
 table.blueTable thead th:first-child {
  border-left: none;
 }
</style>

• Create a variable to reference the style and apply it to the table class:

Table.svelte

<script>
  (...)
  export let style;
</script>
<table class={style}>
  (...)

Now, I’ll use one type of style for each of my two tables created in the other article:

• Add the variables with the names of the styles created in the Table.svelte file, and apply it to the <Table/> element:

App.svelte

<script>
  (...)
  
  let redStyle = "redTable";
  let blueStyle = "blueTable";
</script>
<Table tableData={$studentsArray} style={redStyle}/>
<Table tableData={$colors} style={blueStyle}/>

If you followed using my exemple, your tables also should look like this:

Tables with style

What comes next?

Perfect! Now, we have learned how to create a table component and how to apply styles dynamically using CSS and Svelte. In the next article, we’ll learn how to add or remove a row of the table; how to edit a value on the table; and if the table should be displayed or not.

See ya in the next article!