shadcn.io is not affiliated with official shadcn/ui
Social Analytics Table Block for Svelte
A table of posts with impressions, engagement and clicks, each followed by its change against the previous seven days or the same days last month as an arrow, a signed percentage and a word, with a platform toggle and sortable heads including by change.
Installation
Overview
Show how each result moved, not only where it stands, with this social analytics table for Svelte with Ark UI. A compact header names the table. Inside a hairline frame with a plus mark on each corner, a toolbar band holds a Select, "Compared with" (the previous 7 days or the same days last month), a Toggle Group for the platform and a second one that sets whether the heads sort by value or by change. Below it a native table lists eight Reachlane posts with impressions, engagement and clicks, and under each number the change as an arrow, a signed percentage and a word: "+14% up", "-8% down", "0% flat". Choosing the other period swaps every change at once. The heads sort (first press the usual order, second the reverse, third the order the posts were made), by value or by change, and a polite line says how. The table keeps its height while the platform filter changes the rows. It is built from Select, Toggle Group, Badge and Guides. For social dashboards, campaign reports and any metric that needs its trend beside it.
FAQ
How do I use my own posts and periods?
Edit POSTS: each has its results now (now) and in each period it can be compared with (week and month). The changes are not stored; changeOf works them out as whole percentages, so there is one set of numbers per period to maintain. Add a period by adding a key to the posts and an entry to COMPARES.
How is a change shown without colour?
As an arrow, a signed percentage and a word, in the same muted text for every result: an up arrow with "+14% up", a down arrow with "-8% down" and a dash with "0% flat". Nothing is green or red, so it reads the same in greyscale and in both themes. A screen reader hears the word, the size and the period ("up 14 percent against the previous 7 days").
How do I sort by change?
Set the second toggle to Change, then press a result head: the posts order by how much that result moved in the chosen period. Set it to Value and the same heads sort by the number. The status line says which ("Sorted by impressions change, biggest rise first").
How does the Select behave on each library?
It is the catalog Select: arrow keys and type-ahead choose, Enter or Escape closes it, and the choice swaps the period straight away. It keeps one choice at all times, so there is no empty state to handle.
What stays local, and how do I wire real analytics?
The posts and their periods are constants, and the platform, period, sort and sort mode are four useState calls. To use real data, load the results for both periods from your analytics API when the Select changes and pass them in the same shape; the arrows, words and sorting follow.