Home > Article > Web Front-end > How to Add an Excel-like Table to Your Astro Site (the Easy Way)

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Patricia ArquetteOriginal: 2024-10-23 08:26:02863browse

The philosophy of Astro is one of performance, flexibility, and customization. A web framework that prides itself on rendering as much as it can on the server first, allowing you to choose where your content lives, and giving you as many handles as possible to customize it how you like. The datagrid library you go with should be the same.

Initial Setup - Installing Astro

First things first, we have to setup a basic app—we'll do that by following the prompts in the following command

npm create astro@latest

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Initial Setup - Including ZingGrid Library

The library itself should be included as a script in the front-end (preferably deferred using defer) for a few reasons:

It needs to be included exactly once
While the library itself is small for the sheet volume of features it packs (~259kb compressed), it is too big to be inlined in the HTML and maintain RAIL
- Quick side note: the is:inline directive in Astro really means to opt the script out of any bundling and processing, not that the script will actually be fetched and swapped in place during the build process
A direct integration is not needed as ZingGrid was already build with similar philosophy to Astro in mind

src/layouts/Layout.astro

<!-- ... --->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Astro description">
  <meta name="viewport" content="width=device-width">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <meta name="generator" content={Astro.generator} />
  <title>{title}</title>
  <!-- ZingGrid Library -->
  <script is:inline defer src="/zinggrid.min.js"></script>
</head>
<body></body>
</html>

Creating the Activity Tracker Grid

We'll start with the simplest grid we can make and build up from there. First things first, we create a ActivityGrid.astro component in our src/components directory and add the following code.

We'll be passing our data to this component, so we create a prop for that, and we hand it to using the data attribute.

src/components/ActivityGrid.astro

---
const { data } = Astro.props;
---

<zing-grid data={data}></zing-grid>

Over in our index.astro page in src/pages, we need to add our grid to the page. To do this we'll first need to import the component in our frontmatter (fenced off by ---), and we'll need to pull in our sample JSON as well. Now the only thing we have to be careful of is that we stringify the JSON as it will be passed into as an attribute.

src/pages/index.astro

---
import Layout from '../layouts/Layout.astro';
import ActivityGrid from '../components/ActivityGrid.astro';

import activityData from '../data/activities.json';
const activityDataStr = JSON.stringify(currencyData);
---

<Layout title="ZingGrid + Astro">
  <header> <!-- ... --> </header>
  <main>
    <ActivityGrid data={activityDataStr} />
  </main>
</Layout>

When we load up the page, we'll see a grid that looks like this. Nothing fancy yet, but surprisingly easy to get something going.

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Adding User Controls and a Caption

To enhance our grid we'll start by configuring our element. With 100 attributes to choose from the element has a ton of configuration available to it, but I'll pick out a few I think will be useful to us here:

layout : Determines whether or not the grid is shown in row or card mode
layout-controls : Allow / prevent users from changing the layout mode
sort : Add controls to sort each column
pager : Paginates the grid instead of leaving it as one long list
page-sizer : The number of rows for each page

We'll also add a inside of our so we can give our grid a title

<!-- ... --->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Astro description">
  <meta name="viewport" content="width=device-width">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <meta name="generator" content={Astro.generator} />
  <title>{title}</title>
  <!-- ZingGrid Library -->
  <script is:inline defer src="/zinggrid.min.js"></script>
</head>
<body></body>
</html>

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Formatting the Columns

Having a Distance column without any units makes it a bit hard to read. Luckily ZingGrid allows us to create templates for our columns. We can access the values from our row entry using the index object inside of [[double bracket]] notation. Below is a sample of what our data looks like for reference, the "distance" key is what we're pulling in when we write [[index.distance]] in the template.

src/data/activities.json

---
const { data } = Astro.props;
---

<zing-grid data={data}></zing-grid>

src/data/ActivityGrid.astro

---
import Layout from '../layouts/Layout.astro';
import ActivityGrid from '../components/ActivityGrid.astro';

import activityData from '../data/activities.json';
const activityDataStr = JSON.stringify(currencyData);
---

<Layout title="ZingGrid + Astro">
  <header> <!-- ... --> </header>
  <main>
    <ActivityGrid data={activityDataStr} />
  </main>
</Layout>

And the result is the mi unit being added to each Distance value just as in our template

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Styling the Grid with CSS Vars and Open Props

ZingGrid is built with modern native web components for performance and resiliency, but as a side effect of that a lot of the components exist inside Shadow DOMs. Still wanting to allow users to style any part they desire, hundreds of CSS Variables were created to pierce these shadows. Below we show how they can be used in conjunction Open Props for added flexibility.

---
const { data } = Astro.props;
---

<zing-grid
  data={data}
  layout="row"
  layout-controls="disabled"
  sort
  pager
  page-size="6"
>
  <zg-caption>?? Activity Tracker</zg-caption>
</zing-grid>

Custom Cell Render Functions

To add some extra life to our grid it would be nice to be able to dynamically add an emoji in front of each activity. To do this, we'll create a function called activityRender on the window object (so it's accessible to ZingGrid) and add specify the function name the renderer attribute for the we want to apply it to. Inside this function we'll have the record text passed into us that we can then modify before it gets inserted into the cell.

[
  {
    "activityType": "Outdoor Bike",
    "city": "Tempe",
    "date": "10/17/24",
    "distance": "48.27",
    "elapsedTime": "03:26:35",
    "movingTime": "01:53:15",
    "state": "Arizona"
  },
  /* ... */
]

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Dynamically Adding Classes to Rows

And then finally to color each row based on the activity type, we can use the row-class attribute to pass a function that will dynamically add a class to each row.

<!-- ... --->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Astro description">
  <meta name="viewport" content="width=device-width">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <meta name="generator" content={Astro.generator} />
  <title>{title}</title>
  <!-- ZingGrid Library -->
  <script is:inline defer src="/zinggrid.min.js"></script>
</head>
<body></body>
</html>

We'll then need to create those classes in a global CSS style block as the s are created dynamically on the front-end and thus do not get tagged with the usual style scoping attributes that Astro adds at build time.

---
const { data } = Astro.props;
---

<zing-grid data={data}></zing-grid>

Et Voilà! ? We have a dynamically styled and formatted ZingGrid inside of Astro

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Final Thoughts

With just a little configuration and very little code we were able to construct a robust and dynamic datagrid that fit with our Astro site. We've only scratched the surface of what ZingGrid can do in this article, so there will be a part 2 later on to show what the library can truly do, so watch out for that here if you're interested.

The above is the detailed content of How to Add an Excel-like Table to Your Astro Site (the Easy Way). For more information, please follow other related articles on the PHP Chinese website!

json css html npm Object if sort for while Directory double using class finally Attribute number function this column table Access excel

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Operator FundamentalsNext article：Operator Fundamentals

See more

How to Add an Excel-like Table to Your Astro Site (the Easy Way)

Initial Setup - Installing Astro

Initial Setup - Including ZingGrid Library

src/layouts/Layout.astro

Creating the Activity Tracker Grid

src/components/ActivityGrid.astro

src/pages/index.astro

Adding User Controls and a Caption

Formatting the Columns

src/data/activities.json

src/data/ActivityGrid.astro

Styling the Grid with CSS Vars and Open Props

Custom Cell Render Functions

Dynamically Adding Classes to Rows

Final Thoughts

Related articles