Meta Table

Meta table: tier, win, pick and ban rates with patch-over-patch change, role and rank filters, virtualized. Pro · Games › Meta and tier lists

The meta of a patch: champion with portrait and role, tier, win, pick and ban rates with their change since the last patch, and matches, per rank. Columns sort, filters narrow by role, rank and name, thin samples are marked and ranked last, long tables render only the rows in view, and on a narrow screen each row becomes a two-line card.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add meta-table

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { MetaTable } from 'valyro-ui-pro';

Props

Prop	Type	Default
`entries` *	`MetaTableEntry[]`		Champions (or champion + role pairs) with their stats per rank.
`ranks` *	`MetaRank[]`		Ranks of the rank picker; the first is the default.
`rank`	`string`		Rank shown.
`defaultRank`	`string`		Initial rank when uncontrolled. Default: the first.
`onRankChange`	`(rank: string) => void`		Called when the reader picks a rank.
`roles`	`GameRole[]`		Roles of the entries: shown under the names and, with two or more, a role filter.
`roleFilter`	`string`		Role id the table is narrowed to; `''` shows every role.
`defaultRoleFilter`	`string`	`''`	Initial role filter when uncontrolled. Default `''`.
`onRoleFilterChange`	`(role: string) => void`		Called when the reader picks a role.
`sort`	`MetaTableSort`		Column and direction of the sort.
`defaultSort`	`MetaTableSort`	`{ key: 'tier', direction: 'desc' }`	Initial sort when uncontrolled. Default tier, best first.
`onSortChange`	`(sort: MetaTableSort) => void`		Called when a column header is pressed.
`minGames`	`number`	`500`	Fewer matches than this: marked, and ranked after the rest by win rate and tier. Default 500.
`tiers`	`MetaTier[] \| false`	`DEFAULT_META_TIERS`	Tier column from best to worst, or `false` to hide it. Default S+ to D by win rate.
`onRowClick`	`(entry: MetaTableEntry) => void`		Makes each champion name a button, e.g. to the champion's page.
`maxHeight`	`number \| string`	`560`	Most height of the scrolling body (px or CSS length); rows beyond it render only while in view. Default 560.
`loading`	`boolean`	`false`	Data is loading: skeleton rows.
`error`	`ReactNode`		Loading failed: shown instead of the table.
`title`	`ReactNode`		Heading. Default: `labels.title`.
`subtitle`	`ReactNode`		Line under the heading: patch, period, source.
`headingLevel`	`2 \| 3 \| 4 \| 5`	`3`	Level of the heading (default 3).
`locale`	`string`		BCP 47 locale for numbers and sorting; defaults to the ThemeProvider's.
`labels`	`Partial<MetaTableLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Tier List — S+…D tier list: portraits with role badges, role filter, drag with mouse, touch or keyboard, export
Matchup Matrix — Counterpicks: champion-vs-champion heat matrix with tooltips, pick your champion, a list on phones
Tournament Bracket — Tournament bracket: single and double elimination, series scores, winner, team path, monograms
Patch Notes — Patch notes: champions and items with ability icons, before → after, buffs, nerfs and changes, filters

Previous: Tier List · Next: Matchup Matrix · All Games