Components
TableThe table component is used to display structured data in rows and columns for easy scanning and comparison.
Usage
Use a table to display structured information in rows and columns, making it easy for users to scan, compare, and understand data such as transactions or game history.
When to use Table
Choose a table when users need to organize and compare multiple attributes across items, or when showing datasets that benefit from clear alignment, like lists of players, bets, or transactions.
Formatting
Anatomy
A table is composed of the following elements.
A. Table header – Defines column labels and provides structure for the data.
B. Table row – Each row groups related data points that belong to the same record, transaction, or entity.
C. Table Total – Summarizes data across the table, e.g. totals. (optional).
D. Table cell – The smallest unit, containing a piece of data within a row and column.
E. Table Footer – Supportive text. (optional)
Size
Our tables are available in four row sizes: xsmall (32 px), small (48 px), medium (76 px), and large (96 px).
All sizes share consistent 16 px horizontal padding.
Note: xsmall supports only single-line text — never use it for multi-line content.
Min and max width
Table cells follow defined width limits to ensure readability and consistency. Each column has a minimum width of 120 px and a maximum width of 400 px to prevent individual columns from dominating the layout. The last column may expand to fill any remaining space.
Cell types
Our Simple table supports different cell types to match the content they display.
Text
Use for simple labels or single pieces of information.
Text + description
Use when additional context is needed under the main text.
Numeric
Use for values like amounts or percentages, always right-aligned for readability.
Modify
Variants
Tables can be configured in different variations depending on the data and context.
Default
Balanced spacing for general use, offering a clear overview and comfortable readability.
Striped
A striped table alternates row backgrounds to make large datasets easier to scan.
Sizes
We offer four table sizes to match content density and usage context. Each size is optimized for clarity, consistency, and accessibility across different scenarios.
Medium
Default size for most use cases.
Large
Spacious, best for content-rich or touch-friendly interfaces.
Behavior
Scrolling
The table header remains sticky on vertical scroll to keep column labels visible. If the content exceeds the viewport width, the table can be scrolled horizontally. Tables have a maximum height of 90% of the viewport, after which the body becomes scrollable.
Note: Vertical scrolling should only be used on desktop. On mobile, avoid nested vertical scrolls as they create poor usability. Instead, let the table grow naturally and use horizontal scrolling or pagination when needed.
Screen sizes
XS–small
Tables can be scrolled horizontally if the content exceeds the viewport width. The header remains sticky on vertical scroll to keep column labels visible. (<480px).
Medium-large
Tables scale to available width and maintain alignment. The header is sticky on vertical scroll, and horizontal scrolling is enabled when needed. (≥481px – 1439px).
XL
Tables display more columns within the grid while preserving readability. The header remains sticky, and long datasets may be scrolled. (≥1440px).
Best practice
Avoid long copy
Use concise text and descriptions to keep tables easy to scan. Long copy reduces readability.
Alignment
Numbers should always be right-aligned to make comparisons easy across rows.
Use spacing for readability
Tables should have enough padding and row height to feel open and easy to scan. Avoid squeezing rows and columns too tightly, as it makes the table harder to read and reduces clarity.
