Skip to main content
A table is a customizable component that displays data in rows and columns, providing a structured way to present information. Tables support pagination, alternating row colors, and hover states, making them ideal for displaying large datasets in an organized manner.

​
Default Styling

By default, the Table uses Qonto’s branding with a clean, professional appearance: Default table style

​
Customization Options

The Table can be customized using the following CSS variables:
CSS VariableDescription & Accepted Values
--qonto-embed-table-background-colorAccepts any valid color value (e.g., #ffffff, rgb(255, 255, 255)). Controls the table background color.
--qonto-embed-table-borderAccepts any valid border value (e.g., 1px solid #ddd, 2px solid blue). Controls the table border.
--qonto-embed-table-header-row-background-colorAccepts any valid color value. Controls the header row background color.
--qonto-embed-table-header-row-font-colorAccepts any valid color value. Controls the header row text color.
--qonto-embed-table-header-row-font-sizeAccepts any valid font-size value (e.g., 12px, 0.875rem). Controls the header row font size.
--qonto-embed-table-header-row-line-heightAccepts any valid line-height value (e.g., 1.5, 18px). Controls the header row line height.
--qonto-embed-table-header-row-heightAccepts any valid height value (e.g., 40px, 3rem). Controls the header row height.
--qonto-embed-table-header-row-font-weightAccepts any valid font-weight value (e.g., 400, bold, 700). Controls the header row font weight.
--qonto-embed-table-header-row-text-transformAccepts any valid text-transform value (e.g., uppercase, lowercase, capitalize). Controls text styling.
--qonto-embed-table-header-row-borderAccepts any valid border value. Controls all header row borders.
--qonto-embed-table-header-row-border-topAccepts any valid border value. Controls the header row top border.
--qonto-embed-table-header-row-border-rightAccepts any valid border value. Controls the header row right border.
--qonto-embed-table-header-row-border-bottomAccepts any valid border value. Controls the header row bottom border.
--qonto-embed-table-header-row-border-leftAccepts any valid border value. Controls the header row left border.
--qonto-embed-table-body-row-heightAccepts any valid height value (e.g., 64px, 4rem). Controls the body row height.
--qonto-embed-table-body-row-borderAccepts any valid border value. Controls all body row borders.
--qonto-embed-table-body-row-border-topAccepts any valid border value. Controls the body row top border.
--qonto-embed-table-body-row-border-rightAccepts any valid border value. Controls the body row right border.
--qonto-embed-table-body-row-border-bottomAccepts any valid border value. Controls the body row bottom border.
--qonto-embed-table-body-row-border-leftAccepts any valid border value. Controls the body row left border.
--qonto-embed-table-body-row-background-color-hoverAccepts any valid color value. Controls the body row background color on hover.
--qonto-embed-table-body-row-alternate-background-colorAccepts any valid color value. Controls the alternate (even) row background color.
--qonto-embed-table-body-font-weightAccepts any valid font-weight value. Controls the body row font weight.
--qonto-embed-table-body-font-sizeAccepts any valid font-size value. Controls the body row font size.
--qonto-embed-table-body-row-line-heightAccepts any valid line-height value. Controls the body row line height.
--qonto-embed-table-body-font-colorAccepts any valid color value. Controls the body row text color.
--qonto-embed-table-font-weightAccepts any valid font-weight value. Controls the default font weight for the entire table.
--qonto-embed-table-font-sizeAccepts any valid font-size value. Controls the default font size for the entire table.
--qonto-embed-table-pagination-separationAccepts any valid margin/spacing value (e.g., 16px, 1rem). Controls the spacing between table and pagination.
--qonto-embed-table-pagination-font-colorAccepts any valid color value. Controls the pagination text color.
--qonto-embed-table-pagination-font-sizeAccepts any valid font-size value. Controls the pagination font size.
CSS variable priority follows a cascade: specific variables (e.g., --qonto-embed-table-header-row-border-top) take precedence over general variables (e.g., --qonto-embed-table-header-row-border), which in turn take precedence over global table variables (e.g., --qonto-embed-table-font-weight).

​
Example

This example shows a customized Table with different colors, borders, and spacing: 
:root {
  --qonto-embed-table-border: none;

  --qonto-embed-table-header-row-background-color: #f9fafb;
  --qonto-embed-table-header-row-border: none;
  --qonto-embed-table-header-row-font-color: #374151;
  --qonto-embed-table-header-row-font-size: 0.75rem;
  --qonto-embed-table-header-row-font-weight: bold;
  --qonto-embed-table-header-row-text-transform: uppercase;

  --qonto-embed-table-body-row-height: 52px;
  --qonto-embed-table-body-row-border: none;
  --qonto-embed-table-body-font-color: #6b7280;
  --qonto-embed-table-body-font-weight: 400;
  --qonto-embed-table-body-row-alternate-background-color: #f9fafb;

  --qonto-embed-table-pagination-separation: 16px;
  --qonto-embed-table-pagination-font-color: #6b7280;
  --qonto-embed-table-pagination-font-size: 12px;
}
The result is a table with a custom color scheme, adjusted row heights, and improved spacing, as shown below: Customized table style