shadcn.io is not affiliated with official shadcn/ui
Job Listings Table Block for Svelte
A game studio's careers table with each salary drawn as a bar on one shared $60K to $220K axis, the range in text, a department menu, a Remote only switch, the posted date and an Apply button on each row.
Installation
Overview
Let people compare pay at a glance, with this job listings table for Svelte with Ark UI. A compact header names the board, and a band above the table holds a Select for the department and a Switch for Remote only. A table lists ten open roles at Lanternworks, a game studio: the role and its level, the department, the location, the salary, the date posted and an Apply Button. Every salary is a thin bar from the role's minimum to its maximum along one $60K to $220K axis, with three ticks in the column head and the range in text beside it ("$90K to $120K"), so bars can be compared down the column. The table sits in a fixed-height region with a sticky head, so filtering never changes the block's height, and a filter that matches nothing shows an empty state with a button that clears both controls. Apply marks the row Applied in this demo. On a phone the bar, the department, the location and the date fold away and the text range stays. It's built from Select, Switch, Button, Empty, Guides and a native table, with a CSS entrance only. For careers pages, price lists, rate cards and any table where a range is the point.
FAQ
How is the salary bar drawn, and how do I change the axis?
AXIS_MIN and AXIS_MAX are the ends of the shared axis, in thousands of dollars, and barOf turns each role's min and max into a start and a length as percentages of it. The same constants write the three ticks in the head, so the bars and their labels can't drift apart. Change the two numbers and the middle tick (AXIS_MID) for another currency or range, and keep every row on the same axis, otherwise the bars can't be compared.
How do the department menu and the Remote switch combine?
A role shows when it is in the chosen department (or All departments) and, with the switch on, is remote. The status line says how many of the ten match and names the filters. When nothing matches, the table keeps its head and an empty state fills the region; Clear filters resets both controls and returns focus to the menu.
What does Apply do, and what stays local?
Apply only changes the page: the row's button becomes Applied and the status line says that an application was started "in this demo. Nothing was sent". The roles, the filters and the applied list are all state. For real use, make the click handler link to your application form or call your API, and set the row to Applied from the response.
Is the bar chart accessible?
Yes. The bar is decorative and hidden from assistive technology; the range is real text in the cell, so nothing is lost. The table has a caption, th scope="col" heads and each role as the row header, and every Apply button is named by its role ("Apply for Producer"). The menu and the switch have names and keyboard support, a polite line reports the count after each change, and the scroll region can be focused so it can be scrolled by keyboard.
How does it look on a phone?
The controls stack above the table. In the table the bar, the department, the location and the posted date drop out, with the department and location folded into a line under the role, and the text range stays beside a narrow Apply button. Nothing scrolls sideways; the region scrolls vertically.