How to Add an Excel-like Table to Your Astro Site (the Easy Way)
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
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
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
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.
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
<!-- ... --->
<!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>
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
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
[
{
"activityType": "Outdoor Bike",
"city": "Tempe",
"date": "10/17/24",
"distance": "48.27",
"elapsedTime": "03:26:35",
"movingTime": "01:53:15",
"state": "Arizona"
},
/* ... */
]
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
---
const { data } = Astro.props;
---
<zing-grid data={data}></zing-grid>
Et Voilà! ? We have a dynamically styled and formatted ZingGrid inside of Astro
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What should I do if I encounter garbled code printing for front-end thermal paper receipts?
Apr 04, 2025 pm 02:42 PM
Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
Who gets paid more Python or JavaScript?
Apr 04, 2025 am 12:09 AM
There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.
How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website?
Apr 04, 2025 pm 05:36 PM
Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...
Is JavaScript hard to learn?
Apr 03, 2025 am 12:20 AM
Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.
The Evolution of JavaScript: Current Trends and Future Prospects
Apr 10, 2025 am 09:33 AM
The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.
How to merge array elements with the same ID into one object using JavaScript?
Apr 04, 2025 pm 05:09 PM
How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...
Zustand asynchronous operation: How to ensure the latest state obtained by useStore?
Apr 04, 2025 pm 02:09 PM
Data update problems in zustand asynchronous operations. When using the zustand state management library, you often encounter the problem of data updates that cause asynchronous operations to be untimely. �...
