JetBrains Junie UI design for data tables

Business apps live in tables: orders, users, invoices. Ask an agent for one and you usually get every database column in a row, no filters, and a page that scrolls sideways on a phone. It works, but nobody can find anything in it.

Example task used in this guide: turn a 14-column orders table into one people can scan, filter and use on a phone.

Data tables people can use

A good table answers one question fast: which rows need my attention? That means fewer columns, the important ones first, clear sorting and filters, and a sensible version on small screens. Agents don't make those choices unless you write them down.

Put the rules in guidelines.md

Junie reads project guidelines from .junie/guidelines.md (it also supports AGENTS.md). Add a section for tables:

# Data tables

- Columns people scan first go left. Numbers are right-aligned with the same number of decimals.
- The header row stays visible when the table scrolls.
- Every sortable column shows its sort direction. Default sort is the one people use most.
- Filters sit above the table and show how many are active, with one "Clear all".
- Empty, loading, no results and failed-to-load each have their own state.
- On phones, show the 2-3 key columns and open the rest in a detail view. No horizontal scrolling of the whole page.
- Reuse our existing Table, Button and Input components. No new colors.

Each rule is something you can check on screen. "Make the table clean" isn't; "numbers right-aligned with the same decimals" is.

Study real data tables

With UXKIN connected, Junie can call find_ui_references with plain words like "admin orders table filters" or "data table mobile" and get real product screens that solve the same problem.

Ask it to compare three on a few points: which columns come first, how filters and sorting look, and what happens on a phone. Then have it say which decisions it's adopting. You're borrowing decisions, not screens.

Check it with real data

• Long and messy data: long customer names, large numbers, empty cells. Nothing breaks the layout.
• Sort and filter: the direction is visible, the active filter count is right, and "Clear all" works.
• Scroll a long table: the header stays put.
• Every state: no data yet, loading, no results, failed to load.
• 375px and 1440px: no sideways scrolling of the page on a phone.

Set up UXKIN in Junie

UXKIN connects as a remote MCP server, and you sign in with your UXKIN account, so there's no token to copy. You need a UXKIN plan (Monthly or Lifetime).

1. In the Junie panel, open the … menu on the toolbar and choose the MCP settings. Junie opens its mcp.json file. (From the terminal, Junie CLI uses the same file at ~/.junie/mcp/mcp.json.)
2. Add UXKIN under mcpServers and save:

{
  "mcpServers": {
    "uxkin": {
      "url": "https://uxkin.com/mcp"
    }
  }
}

3. UXKIN shows Authorization required. Choose Authorize; when the UXKIN page opens, log in and click Allow.
4. Check that the status changes to Active and that find_ui_references, find_ui_materials and get_journey are listed.

AI Assistant chat

JetBrains AI Assistant's chat connects to MCP servers in Settings | Tools | AI Assistant | Model Context Protocol (MCP), but it doesn't offer browser sign-in for them yet, so UXKIN's sign-in won't complete there. Use Junie for UI work with UXKIN; it has the sign-in built in.

A prompt you can use

Adapt it to your own table. It starts by reading the code and the rules, asks for real references and lists what to check:

Rework the orders table in src/admin/orders. Today it has 14 columns, no filters, and on a phone the whole page scrolls sideways.

First, read the table and .junie/guidelines.md and list what breaks the rules.

If UXKIN is connected, call find_ui_references with "admin orders table filters" and with "data table mobile". Compare three: which columns they show first, how filters and sorting look, and what they do on a phone. Tell me which decisions you're adopting.

Then:
- Keep the 5 columns people use most; move the rest into a detail view.
- Add filters above the table with an active count and "Clear all".
- Keep the header visible on scroll and show the sort direction.
- Add empty, loading, no-results and error states.

Run it with real-looking data (long names, large numbers) at 375px and 1440px. List each change in one line.

Questions