The League Table module displays a customizable, responsive table with configurable rows, columns, colors, and data.
It uses Bootstrap 5 classes (league-table-responsive) for responsiveness.
All table data, colors, and layout options are editable from the Module Options in the Joomla backend.
Module Options
All options are found in Module > Your League Table Module > Options.
1. Number of Rows
- Field Name: rows
- Default: 5
- Description: Sets how many rows the table will have.
- How to edit: Enter a number (e.g., 8) to increase or decrease table rows.
2. Number of Columns
- Field Name: cols
- Default: 3
- Description: Sets the number of columns.
- How to edit: Enter a number (e.g., 4) to adjust the table width.
3. Header Titles
- Field Name: header_titles
- Description: Comma-separated list of column headers.
- Example: Team, Played, Wins, Draws, Losses
- How to edit: Type the titles separated by commas in the order you want them displayed.
4. Table Data
- Field Name: table_data
- Description: Enter the table cell values.
- Format: JSON array or CSV (comma-separated values, one row per line).
- Example (CSV):
Team A, 10, 7, 2, 1
Team B, 10, 5, 3, 2
Team C, 10, 4, 4, 2
- Example (JSON):
[
["Team A", 10, 7, 2, 1],
["Team B", 10, 5, 3, 2],
["Team C", 10, 4, 4, 2]
]
- How to edit: Enter your table values line by line (CSV) or in JSON format.
5. Header Background Color
- Field Name: header_bg_color
- Default: #007bff (blue)
- Description: Sets the background color of the header row.
- How to edit: Choose a color from the picker or enter a hex code (e.g., #ff0000).
6. Header Text Color
- Field Name: header_text_color
- Default: #ffffff (white)
- Description: Sets the color of text in the header.
- How to edit: Pick a color from the picker or enter a hex code.
7. Cells Text Color
- Field Name: cells_text_color
- Default: #000000 (black)
- Description: Sets the color of text in all table cells.
- How to edit: Pick a color from the picker or enter a hex code.
8. Row Background Colors
- Field Name: row_colors
- Description: Set the background color for each row.
- Format: Comma-separated hex codes for each row.
- Example: #ffd700,#c0c0c0,#cd7f32,#ffffff
- How to edit: Enter a color for each row in order. Leave blank for default background.
9. Table Width
- Field Name: table_width
- Default: 100%
- Description: Width of the table.
- How to edit: Enter a percentage (100%) or pixel value (800px) as desired.