Skip to content

Commit 51cf580

Browse files
jameson-devjameson-dev
authored
Merge pull request #4 from jameson-dev/feature/datatable-advancements
Full Data Table Functionality
2 parents 28d6caa + 90c9459 commit 51cf580

6 files changed

Lines changed: 1042 additions & 60 deletions

File tree

‎index.html‎

Lines changed: 103 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -850,28 +850,115 @@ <h4>Casualty Sex Breakdown <span class="chart-info-icon">i<span class="chart-inf
850850
<!-- Data Table Panel -->
851851
<div id="dataTablePanel" class="data-table-panel" style="display:none;">
852852
<div class="data-table-header">
853-
<span class="data-table-title">Crash Data Table</span>
854-
<div class="data-table-controls">
855-
<span id="dataTableInfo" class="data-table-info"></span>
856-
<button class="data-table-nav-btn" id="dtPrevBtn" onclick="dtChangePage(-1)">&#8249; Prev</button>
857-
<button class="data-table-nav-btn" id="dtNextBtn" onclick="dtChangePage(1)">Next &#8250;</button>
858-
<button class="data-table-close-btn" onclick="toggleDataTable()">&#10005;</button>
853+
<!-- Top Row: Title, Search, Actions -->
854+
<div class="data-table-header-top">
855+
<div class="data-table-title-row">
856+
<span class="data-table-title">Crash Data Table</span>
857+
<span id="dataTableInfo" class="data-table-info"></span>
858+
</div>
859+
860+
<!-- Search Input -->
861+
<input type="text"
862+
id="dtSearch"
863+
class="data-table-search"
864+
placeholder="Search table..."
865+
oninput="searchDataTable(this.value)"
866+
aria-label="Search within table data">
867+
868+
<div class="data-table-actions">
869+
<!-- Column Picker Button -->
870+
<button class="data-table-column-btn"
871+
onclick="toggleColumnPicker()"
872+
title="Show or hide columns"
873+
aria-label="Show or hide columns">
874+
<span class="dt-btn-icon">&#9881;</span>
875+
<span class="dt-btn-text">Columns</span>
876+
</button>
877+
878+
<!-- Export Page Button -->
879+
<button class="data-table-export-btn"
880+
onclick="exportFilteredData(false)"
881+
title="Export current page to CSV"
882+
aria-label="Export current page to CSV">
883+
<span class="dt-btn-icon">&#8595;</span>
884+
<span class="dt-btn-text">Export</span>
885+
</button>
886+
887+
<!-- Maximize/Minimize Button -->
888+
<button class="data-table-maximize-btn"
889+
id="dtMaximizeBtn"
890+
onclick="toggleDataTableMaximize()"
891+
title="Maximize table"
892+
aria-label="Maximize table">
893+
&#9744;
894+
</button>
895+
896+
<button class="data-table-close-btn" onclick="toggleDataTable()" aria-label="Close data table">&#10005;</button>
897+
</div>
898+
</div>
899+
900+
<!-- Bottom Row: Pagination Controls -->
901+
<div class="data-table-header-bottom">
902+
<div class="data-table-pagination">
903+
<span class="dt-pagination-label">Rows per page:</span>
904+
<select id="dtPageSize" class="data-table-page-size" onchange="changePageSize(this.value)" aria-label="Rows per page">
905+
<option value="10">10</option>
906+
<option value="25" selected>25</option>
907+
<option value="50">50</option>
908+
<option value="100">100</option>
909+
<option value="250">250</option>
910+
<option value="500">500</option>
911+
</select>
912+
</div>
913+
914+
<div class="data-table-navigation">
915+
<!-- Jump to Page -->
916+
<div class="data-table-jump">
917+
<span class="dt-jump-label">Page:</span>
918+
<input type="number"
919+
id="dtJumpPage"
920+
class="dt-jump-input"
921+
min="1"
922+
placeholder="1"
923+
onkeypress="handlePageJump(event)"
924+
aria-label="Jump to page number">
925+
</div>
926+
927+
<button class="data-table-nav-btn" id="dtPrevBtn" onclick="dtChangePage(-1)" aria-label="Previous page">
928+
<span>&#8249;</span>
929+
</button>
930+
<button class="data-table-nav-btn" id="dtNextBtn" onclick="dtChangePage(1)" aria-label="Next page">
931+
<span>&#8250;</span>
932+
</button>
933+
</div>
859934
</div>
860935
</div>
936+
937+
<!-- Column Picker Dropdown -->
938+
<div id="columnPicker" class="column-picker" style="display: none;">
939+
<div class="column-picker-header">
940+
<span>Show/Hide Columns</span>
941+
<button onclick="toggleColumnPicker()" aria-label="Close column picker">&#10005;</button>
942+
</div>
943+
<div class="column-picker-list" id="columnPickerList">
944+
<!-- Populated by JavaScript -->
945+
</div>
946+
</div>
947+
861948
<div class="data-table-scroll">
862949
<table id="dataTable" class="data-table">
863950
<thead>
864951
<tr>
865-
<th id="dt-th-Year" onclick="dtSort('Year')" class="dt-sortable">Year <span class="dt-sort-icon">&#8597;</span></th>
866-
<th id="dt-th-Crash_Date_Time" onclick="dtSort('Crash Date Time')" class="dt-sortable">Date/Time <span class="dt-sort-icon">&#8597;</span></th>
867-
<th id="dt-th-Suburb" onclick="dtSort('Suburb')" class="dt-sortable">Suburb <span class="dt-sort-icon">&#8597;</span></th>
868-
<th id="dt-th-LGA" onclick="dtSort('LGA')" class="dt-sortable">LGA <span class="dt-sort-icon">&#8597;</span></th>
869-
<th id="dt-th-CSEF_Severity" onclick="dtSort('CSEF Severity')" class="dt-sortable">Severity <span class="dt-sort-icon">&#8597;</span></th>
870-
<th id="dt-th-Crash_Type" onclick="dtSort('Crash Type')" class="dt-sortable">Crash Type <span class="dt-sort-icon">&#8597;</span></th>
871-
<th id="dt-th-Area_Speed" onclick="dtSort('Area Speed')" class="dt-sortable">Speed Zone <span class="dt-sort-icon">&#8597;</span></th>
872-
<th id="dt-th-Total_Fats" onclick="dtSort('Total Fats')" class="dt-sortable">Fatal <span class="dt-sort-icon">&#8597;</span></th>
873-
<th id="dt-th-Total_SI" onclick="dtSort('Total SI')" class="dt-sortable">SI <span class="dt-sort-icon">&#8597;</span></th>
874-
<th id="dt-th-Total_MI" onclick="dtSort('Total MI')" class="dt-sortable">MI <span class="dt-sort-icon">&#8597;</span></th>
952+
<th id="dt-th-Year" onclick="dtSort('Year')" class="dt-sortable" tabindex="0" role="button" aria-label="Sort by Year">Year <span class="dt-sort-icon">&#8597;</span><div class="column-resizer"></div></th>
953+
<th id="dt-th-Crash_Date_Time" onclick="dtSort('Crash Date Time')" class="dt-sortable" tabindex="0" role="button" aria-label="Sort by Date/Time">Date/Time <span class="dt-sort-icon">&#8597;</span><div class="column-resizer"></div></th>
954+
<th id="dt-th-Suburb" onclick="dtSort('Suburb')" class="dt-sortable" tabindex="0" role="button" aria-label="Sort by Suburb">Suburb <span class="dt-sort-icon">&#8597;</span><div class="column-resizer"></div></th>
955+
<th id="dt-th-LGA" onclick="dtSort('LGA')" class="dt-sortable" tabindex="0" role="button" aria-label="Sort by LGA">LGA <span class="dt-sort-icon">&#8597;</span><div class="column-resizer"></div></th>
956+
<th id="dt-th-CSEF_Severity" onclick="dtSort('CSEF Severity')" class="dt-sortable" tabindex="0" role="button" aria-label="Sort by Severity">Severity <span class="dt-sort-icon">&#8597;</span><div class="column-resizer"></div></th>
957+
<th id="dt-th-Crash_Type" onclick="dtSort('Crash Type')" class="dt-sortable" tabindex="0" role="button" aria-label="Sort by Crash Type">Crash Type <span class="dt-sort-icon">&#8597;</span><div class="column-resizer"></div></th>
958+
<th id="dt-th-Area_Speed" onclick="dtSort('Area Speed')" class="dt-sortable" tabindex="0" role="button" aria-label="Sort by Speed Zone">Speed Zone <span class="dt-sort-icon">&#8597;</span><div class="column-resizer"></div></th>
959+
<th id="dt-th-Total_Fats" onclick="dtSort('Total Fats')" class="dt-sortable" tabindex="0" role="button" aria-label="Sort by Fatalities">Fatal <span class="dt-sort-icon">&#8597;</span><div class="column-resizer"></div></th>
960+
<th id="dt-th-Total_SI" onclick="dtSort('Total SI')" class="dt-sortable" tabindex="0" role="button" aria-label="Sort by Serious Injuries">SI <span class="dt-sort-icon">&#8597;</span><div class="column-resizer"></div></th>
961+
<th id="dt-th-Total_MI" onclick="dtSort('Total MI')" class="dt-sortable" tabindex="0" role="button" aria-label="Sort by Minor Injuries">MI <span class="dt-sort-icon">&#8597;</span><div class="column-resizer"></div></th>
875962
</tr>
876963
</thead>
877964
<tbody id="dataTableBody"></tbody>

‎src/js/config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export const YEAR_RANGE = {
1313
// Data table configuration
1414
export const DATA_TABLE = {
1515
PAGE_SIZE: 25,
16+
PAGE_SIZE_OPTIONS: [10, 25, 50, 100, 250, 500],
17+
DEFAULT_PAGE_SIZE: 25,
1618
COLUMNS: [
1719
{ key: 'Year', label: 'Year', sortable: true },
1820
{ key: 'Crash Date Time', label: 'Date/Time', sortable: true },

‎src/js/main.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,16 @@ async function setupGlobalHandlers() {
9090
window.clearAllOptions = ui.clearAllOptions;
9191
window.removeChip = ui.removeChip;
9292
window.handleLocationKeydown = ui.handleLocationKeydown;
93+
// New data table functions
94+
window.changePageSize = ui.changePageSize;
95+
window.handlePageJump = ui.handlePageJump;
96+
window.searchDataTable = ui.searchDataTable;
97+
window.toggleColumnPicker = ui.toggleColumnPicker;
98+
window.toggleColumnVisibility = ui.toggleColumnVisibility;
99+
window.showCrashDetails = ui.showCrashDetails;
100+
window.highlightMarkerFromTable = ui.highlightMarkerFromTable;
101+
window.unhighlightMarkerFromTable = ui.unhighlightMarkerFromTable;
102+
window.toggleDataTableMaximize = ui.toggleDataTableMaximize;
93103

94104
const filters = await import('./filters.js');
95105
window.applyFilters = filters.applyFilters;

‎src/js/state.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,23 @@ export const uiState = {
6060
currentTutorialTab: 'getting-started',
6161
dtCurrentPage: 0,
6262
dtSortField: 'Year',
63-
dtSortAsc: false
63+
dtSortAsc: false,
64+
dtPageSize: 25,
65+
dtSearchTerm: '',
66+
dtVisibleColumns: {
67+
'Year': true,
68+
'Crash Date Time': true,
69+
'Suburb': true,
70+
'LGA': true,
71+
'CSEF Severity': true,
72+
'Crash Type': true,
73+
'Area Speed': true,
74+
'Total Fats': true,
75+
'Total SI': true,
76+
'Total MI': true
77+
},
78+
dtHoveredRow: null,
79+
dtMaximized: false
6480
};
6581

6682
// Cache state

0 commit comments

Comments
 (0)