🧩 Standalone Components Demo
These components can be embedded in any website using simple script tags!
📊 Dashboard Application
Complete NBL statistics dashboard with dynamic filtering and navigation:
🎯 Live Dashboard Demo
View teams, players, and match statistics with dynamic filtering
Open Dashboard →
Features:
- 📊 Interactive sidebar navigation
- 🔧 Dynamic component loading
- 🎛️ Real-time filtering (League, Season, Season Type)
- 📱 Responsive design
- ⚡ Fast data loading and caching
🏀 Match Slider Component
React-based sports match slider with live scores and filtering:
Basic Example:
<div id="my-match-slider"></div>
<script src="/components/matchSlider.js"
data-element="my-match-slider"
data-league="nbl1"
data-year="2024"
data-theme-color="#dc3545"
data-google-font="Roboto"></script>
Advanced Example with Team Filter:
<div id="team-matches"></div>
<script src="/components/matchSlider.js"
data-element="team-matches"
data-league="nbl"
data-year="2024"
data-season-type="regular"
data-team-code="SYD"
data-theme-color="#007bff"
data-display-time="true"
data-footer="venue"></script>
🏆 League Ladder Component
Interactive standings table with sortable columns and team logos:
NBL1 Men's East Conference:
<div id="my-league-ladder"></div>
<script src="/components/leagueLadder.js"
data-element="my-league-ladder"
data-league="nbl1"
data-year="2024"
data-conference="east"
data-gender="male"></script>
NBL1 Women's West Conference:
<div id="women-ladder"></div>
<script src="/components/leagueLadder.js"
data-element="women-ladder"
data-league="nbl1"
data-year="2024"
data-conference="west"
data-gender="female"></script>
👥 Teams Table Component
Comprehensive team statistics with DataTables integration and CSV export:
NBL Teams (Men's):
<div id="my-teams-table"></div>
<script src="/components/teamsTable.js"
data-teams-table
data-element="my-teams-table"
data-league="nbl"
data-season="2024"
data-season-type="regular"
data-theme-color="#007bff"></script>
WNBL Teams (Women's):
<div id="wnbl-teams"></div>
<script src="/components/teamsTable.js"
data-teams-table
data-element="wnbl-teams"
data-league="wnbl"
data-season="2024"
data-season-type="regular"
data-theme-color="#e91e63"></script>
NBL1 Teams (Development League):
<div id="nbl1-teams"></div>
<script src="/components/teamsTable.js"
data-teams-table
data-element="nbl1-teams"
data-league="nbl1"
data-season="2024"
data-season-type="regular"
data-theme-color="#2196f3"></script>
🏀 Players Table Component
Detailed player statistics with photos and advanced filtering:
All NBL Players:
<div id="my-players-table"></div>
<script src="/components/playersTable.js"
data-players-table
data-element="my-players-table"
data-league="nbl"
data-season="2024"
data-season-type="regular"
data-theme-color="#28a745"></script>
WNBL Players (Women's):
<div id="wnbl-players"></div>
<script src="/components/playersTable.js"
data-players-table
data-element="wnbl-players"
data-league="wnbl"
data-season="2024"
data-season-type="regular"
data-theme-color="#e91e63"></script>
Team-Specific Players:
<div id="team-players"></div>
<script src="/components/playersTable.js"
data-players-table
data-element="team-players"
data-league="nbl"
data-season="2024"
data-season-type="regular"
data-team-id="tas"
data-theme-color="#ff9800"></script>
Complete Example with All Options:
<!DOCTYPE html>
<html>
<head>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="complete-players"></div>
<script src="/components/playersTable.js"
data-players-table
data-element="complete-players"
data-league="nbl"
data-season="2024"
data-season-type="regular"
data-team-id=""
data-theme-color="#6366f1"></script>
</body>
</html>
📅 Matches Table Component
Match schedules and results with live status indicators:
All NBL Matches:
<div id="my-matches-table"></div>
<script src="/components/matchesTable.js"
data-matches-table
data-element="my-matches-table"
data-league="nbl"
data-season="2024"
data-season-type="regular"
data-theme-color="#dc3545"></script>
WNBL Finals Matches:
<div id="wnbl-finals"></div>
<script src="/components/matchesTable.js"
data-matches-table
data-element="wnbl-finals"
data-league="wnbl"
data-season="2024"
data-season-type="finals"
data-theme-color="#e91e63"></script>
Team-Specific Matches:
<div id="team-matches-table"></div>
<script src="/components/matchesTable.js"
data-matches-table
data-element="team-matches-table"
data-league="nbl"
data-season="2024"
data-season-type="regular"
data-team-id="syd"
data-theme-color="#007bff"></script>
📊 Match Detail Component
Comprehensive match analysis with player statistics, court visualization, and play-by-play timeline:
Basic Match Detail:
<div id="my-match-detail" data-component="match-detail"
data-match-id="9916d252-d345-422e-9590-d0d224f21165"
data-league="nbl"
data-theme-color="#6366f1"></div>
<script src="/components/matchDetail.js"></script>
WNBL Match Detail:
<div id="wnbl-match" data-component="match-detail"
data-match-id="your-wnbl-match-id"
data-league="wnbl"
data-theme-color="#e91e63"></div>
<script src="/components/matchDetail.js"></script>
Complete HTML Example:
<!DOCTYPE html>
<html>
<head>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="match-container" data-component="match-detail"
data-match-id="9916d252-d345-422e-9590-d0d224f21165"
data-league="nbl"
data-theme-color="#28a745"></div>
<script src="/components/matchDetail.js"></script>
</body>
</html>
🎛️ Configuration Options
Components accept configuration via data attributes:
Match Slider Options:
- data-element - Target container ID (required)
- data-league - League name (default: nbl1)
- data-year - Season year (default: 2024)
- data-season-type - Season type (default: regular)
- data-team-code - Filter by team code (optional)
- data-conference - Filter by conference (optional)
- data-division - Filter by division (optional)
- data-theme-color - Theme color (default: #555)
- data-display-time - Show match times (default: true)
- data-footer - Footer type: 'venue' or 'default'
- data-google-font - Google Font name (optional)
League Ladder Options:
- data-element - Target container ID (required)
- data-league - League name (default: nbl1)
- data-year - Season year (default: 2024)
- data-season-type - Season type (default: regular)
- data-conference - Conference filter (default: east)
- data-gender - Gender category (default: male)
Teams Table Options:
- data-element - Target container ID (required)
- data-league - League code (nbl, wnbl, nbl1)
- data-season - Season year (default: 2024)
- data-season-type - Season type (regular, finals)
- data-theme-color - Primary color theme
Players Table Options:
- data-element - Target container ID (required)
- data-league - League code (nbl, wnbl, nbl1)
- data-season - Season year (default: 2024)
- data-season-type - Season type (regular, finals)
- data-team-id - Filter by specific team (optional)
- data-theme-color - Primary color theme
Matches Table Options:
- data-element - Target container ID (required)
- data-league - League code (nbl, wnbl, nbl1)
- data-season - Season year (default: 2024)
- data-season-type - Season type (regular, finals)
- data-team-id - Filter by specific team (optional)
- data-theme-color - Primary color theme
Match Detail Options:
- data-match-id - Match ID to display (required)
- data-league - League code (nbl, wnbl, nbl1)
- data-theme-color - Primary color theme