Customizable Tables

package.json

@@ -17,7 +17,7 @@
 		"deploy": "yarn run lint && yarn test && node tools/deploy.mjs",
 		"deploy-all": "yarn run lint && yarn test && node tools/deploy-all.mjs",
 		"start-watch": "concurrently --kill-others \"yarn run start\" \"yarn run watch\"",
-		"watch": "yarn run ajv-hack && node --openssl-legacy-provider tools/watch.js",
+		"watch": "yarn run ajv-hack && node tools/watch.js",
 		"lint": "concurrently --raw \"yarn run lint-js\" \"yarn run lint-ts\"",
 		"lint-js": "eslint \"*.{mjs,js,ts,tsx}\" \"public/*.js\" \"src/**/*.{mjs,js,ts,tsx}\" \"tools/**/*.{mjs,js,ts,tsx}\"",
 		"lint-ts": "node tools/pre-test.mjs && yarn run tsc",

public/css/dark.scss

@@ -324,7 +324,6 @@ input[type="checkbox"][disabled]:not(.custom-control-input) {
 	}
 }
 
-.sorting_asc,
-.sorting_desc {
+.sorted {
 	background-color: #5f583c !important;
 }

public/css/light.scss

@@ -1299,7 +1299,6 @@ code {
 	transition: none !important;
 }
 
-.sorting_asc,
-.sorting_desc {
+.sorted {
 	background-color: #ffeeba !important;
 }

src/common/getCols.ts

@@ -1,8 +1,8 @@
-import type { Col } from "../ui/components/DataTable";
+import type { LegacyCol } from "../ui/components/DataTable";
 import bySport from "./bySport";
 import isSport from "./isSport";
 
-type ColTemp = Omit<Col, "title"> & {
+type ColTemp = Omit<LegacyCol, "title"> & {
 	title?: string;
 };
 
@@ -2083,6 +2083,7 @@ const cols: {
 	},
 	"Draft Picks": {
 		sortSequence: [],
+		sortType: "draftPick",
 	},
 	"Draft Year": {
 		sortType: "number",
@@ -2625,8 +2626,8 @@ const cols: {
 
 export default (
 	titles: string[],
-	overrides: Record<string, Partial<Col>> = {},
-): Col[] => {
+	overrides: Record<string, Partial<LegacyCol>> = {},
+): LegacyCol[] => {
 	return titles.map(title => {
 		if (!cols.hasOwnProperty(title)) {
 			throw new Error(`Unknown column: "${title}"`);

src/common/types.basketball.ts

@@ -71,7 +71,7 @@ export type AwardPlayerDefense = {
 
 export type Awards<
 	PlayerOverride = AwardPlayer,
-	PlayerDefenseOverride = AwardPlayerDefense
+	PlayerDefenseOverride = AwardPlayerDefense,
 > = {
 	season: number;
 	bestRecord: AwardTeam;

src/common/types.ts

@@ -1625,6 +1625,7 @@ export type UpdateEvents = (
 	| "team"
 	| "teamFinances"
 	| "watchList"
+	| "customizeTable"
 )[];
 
 export type RealPlayerPhotos = Record<string, string>;

src/ui/components/BoxScore.basketball.tsx

@@ -1,7 +1,8 @@
 import PropTypes from "prop-types";
 import ResponsiveTableWrapper from "./ResponsiveTableWrapper";
 import SafeHtml from "../components/SafeHtml";
-import { getCols, helpers } from "../util";
+import { helpers } from "../util";
+import getCols from "../util/columns/getCols";
 import { sortByStats, StatsHeader } from "./BoxScore.football";
 import { MouseEvent, useState } from "react";
 import type { SortBy } from "./DataTable";
@@ -22,13 +23,13 @@ const StatsTable = ({
 }) => {
 	const [sortBys, setSortBys] = useState<SortBy[]>([]);
 
-	const onClick = (event: MouseEvent, i: number) => {
+	const onClick = (event: MouseEvent, colKey: string) => {
 		setSortBys(prevSortBys => {
 			const newSortBys =
 				updateSortBys({
 					cols,
 					event,
-					i,
+					colKey,
 					prevSortBys,
 				}) ?? [];
 

src/ui/components/BoxScore.football.tsx

@@ -1,7 +1,8 @@
 import PropTypes from "prop-types";
 import { memo, Fragment, MouseEvent, ReactNode, useState } from "react";
 import ResponsiveTableWrapper from "./ResponsiveTableWrapper";
-import { getCols, processPlayerStats } from "../util";
+import { processPlayerStats } from "../util";
+import getCols from "../util/columns/getCols";
 import { filterPlayerStats, getPeriodName, helpers } from "../../common";
 import { PLAYER_GAME_STATS } from "../../common/constants.football";
 import type { Col, SortBy } from "./DataTable";
@@ -39,7 +40,7 @@ export const StatsHeader = ({
 	sortable,
 }: {
 	cols: Col[];
-	onClick: (b: MouseEvent, a: number) => void;
+	onClick: (b: MouseEvent, a: string) => void;
 	sortBys: SortBy[];
 	sortable: boolean;
 }) => {
@@ -53,7 +54,7 @@ export const StatsHeader = ({
 				if (sortable) {
 					className = "sorting";
 					for (const sortBy of sortBys) {
-						if (sortBy[0] === i) {
+						if (sortBy[0] === col.key) {
 							className = sortBy[1] === "asc" ? "sorting_asc" : "sorting_desc";
 							break;
 						}
@@ -65,7 +66,7 @@ export const StatsHeader = ({
 						className={className}
 						key={i}
 						onClick={event => {
-							onClick(event, i);
+							onClick(event, col.key);
 						}}
 						title={desc}
 					>
@@ -84,7 +85,7 @@ export const sortByStats = (
 ) => {
 	return (a: any, b: any) => {
 		for (const [index, order] of sortBys) {
-			const stat = stats[index];
+			const stat = index.includes(":") ? index.split(":")[1] : index;
 
 			const aValue = getValue?.(a, stat) ?? a.processed[stat];
 			const bValue = getValue?.(b, stat) ?? b.processed[stat];
@@ -115,20 +116,21 @@ const StatsTableIndividual = ({
 
 	const [sortBys, setSortBys] = useState(() => {
 		return PLAYER_GAME_STATS[type].sortBy.map(
-			stat => [stats.indexOf(stat), "desc"] as SortBy,
+			stat => [`stat:${stat}`, "desc"] as SortBy,
 		);
 	});
 
-	const onClick = (event: MouseEvent, i: number) => {
-		setSortBys(
-			prevSortBys =>
+	const onClick = (event: MouseEvent, colKey: string) => {
+		setSortBys(prevSortBys => {
+			return (
 				updateSortBys({
 					cols,
 					event,
-					i,
+					colKey,
 					prevSortBys,
-				}) ?? [],
-		);
+				}) ?? []
+			);
+		});
 	};
 
 	const players = t.players

src/ui/components/BoxScore.hockey.tsx

@@ -1,14 +1,15 @@
 import PropTypes from "prop-types";
-import { memo, Fragment, MouseEvent, ReactNode, useState } from "react";
+import { Fragment, memo, MouseEvent, ReactNode, useState } from "react";
 import ResponsiveTableWrapper from "./ResponsiveTableWrapper";
-import { getCols, helpers, processPlayerStats } from "../util";
+import { helpers, processPlayerStats } from "../util";
 import { filterPlayerStats, getPeriodName } from "../../common";
 import type { PlayByPlayEventScore } from "../../worker/core/GameSim.hockey/PlayByPlayLogger";
 import { formatClock } from "../util/processLiveGameEvents.hockey";
 import { PLAYER_GAME_STATS } from "../../common/constants.hockey";
 import { sortByStats, StatsHeader } from "./BoxScore.football";
 import updateSortBys from "./DataTable/updateSortBys";
 import type { SortBy } from "./DataTable";
+import getCols from "../util/columns/getCols";
 
 type Team = {
 	abbrev: string;
@@ -42,20 +43,21 @@ const StatsTable = ({
 
 	const [sortBys, setSortBys] = useState(() => {
 		return PLAYER_GAME_STATS[type].sortBy.map(
-			stat => [stats.indexOf(stat), "desc"] as SortBy,
+			stat => [`stat:${stat}`, "desc"] as SortBy,
 		);
 	});
 
-	const onClick = (event: MouseEvent, i: number) => {
-		setSortBys(
-			prevSortBys =>
+	const onClick = (event: MouseEvent, colKey: string) => {
+		setSortBys(prevSortBys => {
+			return (
 				updateSortBys({
 					cols,
 					event,
-					i,
+					colKey,
 					prevSortBys,
-				}) ?? [],
-		);
+				}) ?? []
+			);
+		});
 	};
 
 	const players = t.players

src/ui/components/DataTable/Controls.tsx

@@ -16,6 +16,7 @@ const style = {
 
 const Controls = ({
 	enableFilters,
+	enableCustomizeColumns,
 	hideAllControls,
 	name,
 	onExportCSV,
@@ -26,6 +27,7 @@ const Controls = ({
 	searchText,
 }: {
 	enableFilters: boolean;
+	enableCustomizeColumns: boolean;
 	hideAllControls?: boolean;
 	name: string;
 	onExportCSV: () => void;
@@ -131,9 +133,13 @@ const Controls = ({
 					<span className="glyphicon glyphicon-option-vertical text-muted" />
 				</Dropdown.Toggle>
 				<Dropdown.Menu>
-					<Dropdown.Item onClick={onSelectColumns}>
-						Customize Columns
-					</Dropdown.Item>
+					{enableCustomizeColumns ? (
+						<Dropdown.Item onClick={onSelectColumns}>
+							Customize Columns
+						</Dropdown.Item>
+					) : (
+						""
+					)}
 					<Dropdown.Item onClick={onExportCSV}>
 						Download Spreadsheet
 					</Dropdown.Item>