Displaying Table Entries from the State

Learn how to use stores in Svelte to display the state of our application to our users.

We'll cover the following

Now that we have the state ready, it’s time to display something meaningful to our users. We're going to start with our home page and display the list of students in the system in a table. For this, we’re going to need some data to look at.

In order to generate some mock data, we can use a tool called JSON generator. For now, pregenerated data has been automatically appended into the example application that has the following structure:

const state = {

    students: [

        {

            "id": "63468059c85a96bfad59d1c4",

            "name": "Francisca Raymond",

            "phone": "+1 (992) 412-2727",

            "email": "franciscaraymond@datagene.com",

            "score": 1559,

            "age": 16,

            "registered": "2020-09-24T02:43:36 -02:00",

            "isActive": true,

            "note": "Pariatur consequat sit duis id qui. Elit deserunt duis ea dolor deserunt consequat mollit tempor. Dolore do sit reprehenderit laboris et sunt magna ipsum sit.\r\n"

        }

    ]

}

Let's start things at the root of our application. Remove everything from App.svelte in the widget below, which contains our application, and replace it with the following component:

<script>
  import List from './pages/List.svelte'
</script>
<List />

We'll be dividing our pages into separate components. Notice that the application below already has a pages folder created with a List.svelte file inside it. Once we've replaced the contents of App.svelte, we inspect the contents of List.svelte inside the pages folder.

Notice from the import statements in List.svelte that the components folder lives next to the pages folder. Try to run the application to see if everything is executed correctly and if there are no errors.

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  build: {
    outDir: 'build'
  }
})
Prepare App.svelte

Replace the contents of App.svelte using the code example above. Since we got rid of the template for App.svelte, we can also remove the assets and lib folders inside the src folder.

Let's go through the List component from top to bottom and see what else we're going to need. We're going to reuse the Header in both the List and Details view. This means we'll need to display different things depending on the page. Take a look at the picture below.

Headers in the List vs. the Details view
Headers in the List vs. the Details view

Create the header

For the List view, we'll have the logo and the name of the dashboard, as well as buttons for bulk deleting students and adding new students and an option for filtering. On the other hand, the Details view will show the student's name and age at the top, with options to export or duplicate the student, as well as a “Back” button to return to the List view.

We’ll render the Details view if the name of a student is selected. Otherwise, we’ll render the List view. This means we're going to need an if-else statement to check the presence of a student object.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
Replicate the if-else logic block for the buttons

We can decide on what to display based on a passed prop (short for property). In order to define props in Svelte, we can use the export let <variable> syntax. Notice that we also assign a default value for it. Try to replace the same logic for the buttons inside the div, then change the default value of student from null to true to see how different parts of the component will get displayed. For now, don't worry about the styles because we'll address them in future lessons.

Also, notice that we're referencing the image in the root folder. To add static assets in Svelte, we need to add our images to the public folder. This will be all for our Header. We'll implement the buttons in later lessons. For now, let's jump to the next component in our template: the table.

Create the table

This is where we're going to display all notable information about each student. For this, we'll need to use our `state`, so the first thing we’ll do is import it. We'll need to use an #each logic block in Svelte to loop through the students and display each relevant field in a column. Go ahead and try to implement the loop in the template:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
Implement logical block to display students' properties

Try to implement an #each logic block to display each student. Don't forget to link the email for quick contact access. This can be done natively in HTML using mailto: in the href of a link. For the "Active" column, we want to display two different icons based on whether the student's account is active on the platform or not:

  • ✅: For active students

  • ❌: For inactive students