From be9a7f5b2996f9eb96658f326d19386c8a288a7e Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Tue, 18 Mar 2025 16:13:55 +0100 Subject: [PATCH 1/4] update hightable demo --- hightable/package.json | 2 +- hightable/src/Basic.tsx | 2 +- hightable/src/Controlled.tsx | 9 +++++---- hightable/src/Layout.tsx | 1 + hightable/src/Mirror.tsx | 2 +- hightable/src/Unstyled.tsx | 12 ++++++++++++ hightable/src/index.css | 2 +- hightable/src/main.tsx | 2 ++ 8 files changed, 24 insertions(+), 8 deletions(-) create mode 100644 hightable/src/Unstyled.tsx diff --git a/hightable/package.json b/hightable/package.json index 325f31a..ef18a72 100644 --- a/hightable/package.json +++ b/hightable/package.json @@ -14,7 +14,7 @@ "typecheck": "tsc" }, "dependencies": { - "hightable": "0.12.1", + "hightable": "../../hightable/hightable-0.12.1.tgz", "react": "18.3.1", "react-dom": "18.3.1", "react-router": "7.3.0" diff --git a/hightable/src/Basic.tsx b/hightable/src/Basic.tsx index 9586eb1..b4cf704 100644 --- a/hightable/src/Basic.tsx +++ b/hightable/src/Basic.tsx @@ -5,6 +5,6 @@ import { data } from './data' export default function Basic() { return - + } diff --git a/hightable/src/Controlled.tsx b/hightable/src/Controlled.tsx index 8e57c92..4222366 100644 --- a/hightable/src/Controlled.tsx +++ b/hightable/src/Controlled.tsx @@ -25,7 +25,8 @@ function createRandomSelection(): Selection { function createRandomOrderBy(): OrderBy { const columns = data.header const column = columns[Math.floor(Math.random() * columns.length)] - return { column } + const direction = Math.random() < 0.5 ? 'ascending' : 'descending' + return [{ column, direction }] } function getNumSelected(selection: Selection): number { @@ -34,7 +35,7 @@ function getNumSelected(selection: Selection): number { export default function Controlled() { const [selection, setSelection] = useState({ ranges: [] }) - const [orderBy, setOrderBy] = useState({}) + const [orderBy, setOrderBy] = useState([]) const numSelectedRows = getNumSelected(selection) @@ -47,8 +48,8 @@ export default function Controlled() {
- - {orderBy.column ? `Ordered by '${orderBy.column}'` : 'Unordered'} + + {orderBy[0]?.column ? `Ordered by '${orderBy[0]?.column}'` : 'Unordered'}
diff --git a/hightable/src/Layout.tsx b/hightable/src/Layout.tsx index 5d11e55..8da91b5 100644 --- a/hightable/src/Layout.tsx +++ b/hightable/src/Layout.tsx @@ -12,6 +12,7 @@ export default function Layout({ children }: { children: ReactNode }) { ['Selection', '/selection'], ['Controlled', '/controlled'], ['Mirror', '/mirror'], + ['Unstyled', '/unstyled'], ].map(([label, path]) => isActive ? 'link active' : 'link' } >{label}, diff --git a/hightable/src/Mirror.tsx b/hightable/src/Mirror.tsx index 3f0863f..92e31e7 100644 --- a/hightable/src/Mirror.tsx +++ b/hightable/src/Mirror.tsx @@ -5,7 +5,7 @@ import { data } from './data' export default function App() { const [selection, setSelection] = useState({ ranges: [] }) - const [orderBy, setOrderBy] = useState({}) + const [orderBy, setOrderBy] = useState([]) return diff --git a/hightable/src/Unstyled.tsx b/hightable/src/Unstyled.tsx new file mode 100644 index 0000000..0476f33 --- /dev/null +++ b/hightable/src/Unstyled.tsx @@ -0,0 +1,12 @@ +import { HighTable } from 'hightable' +import { useState } from 'react' +import { data } from './data' +import Layout from './Layout' + +export default function Basic() { + const [, setSelection] = useState(undefined) + + return + + +} diff --git a/hightable/src/index.css b/hightable/src/index.css index a5d1c0a..ccf6324 100644 --- a/hightable/src/index.css +++ b/hightable/src/index.css @@ -128,7 +128,7 @@ nav.sidebar > div { gap: 0.5em; } -.table-corner { +thead td:first-child { align-items: center; background: url('https://hyperparam.app/assets/table/hightable.svg') #f9f4ff no-repeat center 6px; } diff --git a/hightable/src/main.tsx b/hightable/src/main.tsx index 3da6402..c27d073 100644 --- a/hightable/src/main.tsx +++ b/hightable/src/main.tsx @@ -5,6 +5,7 @@ import Basic from './Basic.js' import Controlled from './Controlled.js' import Mirror from './Mirror.js' import Selection from './Selection.js' +import Unstyled from './Unstyled.js' import './index.css' const app = document.getElementById('app') @@ -15,5 +16,6 @@ ReactDOM.createRoot(app).render( } /> } /> } /> + } /> ) From 19e816e7685306e6262f687048a44d379956f132 Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Tue, 18 Mar 2025 18:51:59 +0100 Subject: [PATCH 2/4] add a demo with custom colors --- hightable/src/CustomTheme.css | 72 +++++++++++++++++++++++++++++++++++ hightable/src/CustomTheme.tsx | 13 +++++++ hightable/src/Layout.tsx | 1 + hightable/src/Unstyled.tsx | 2 +- hightable/src/main.tsx | 2 + 5 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 hightable/src/CustomTheme.css create mode 100644 hightable/src/CustomTheme.tsx diff --git a/hightable/src/CustomTheme.css b/hightable/src/CustomTheme.css new file mode 100644 index 0000000..1d845f7 --- /dev/null +++ b/hightable/src/CustomTheme.css @@ -0,0 +1,72 @@ +.custom-hightable { + --mock-row-label-background: lightcoral; + --border-color: lightcoral; + --sort-indicator-background: transparent; + --header-background-color: lightblue; + --row-label-background: lightgreen; + --row-label-color: black; + --selected-row-background: lightyellow; + --selected-row-header-background: lightcoral; + --resizer-color: lightcoral; + --table-corner-logo-background: lightcoral; + --top-bar-background-color: lightcoral; + --table-corner-background: lightcoral; +} + +.custom-hightable thead th { + background-color: var(--header-background-color); + border-bottom: 2px solid var(--border-color); + color: hsl(0, 100%, 27%); + font-family: mono; +} + +.custom-hightable thead th[aria-sort="ascending"]::after, +.custom-hightable thead th[aria-sort="descending"]::after { + background-color: var(--sort-indicator-background); +} + +/* cells */ +.custom-hightable th, +.custom-hightable td { + border-bottom: 1px solid var(--border-color); + border-right: 1px solid var(--border-color); +} + +/* column resize */ +.custom-hightable thead [role="separator"] { + border-right: 1px solid var(--border-color); +} +.custom-hightable thead [role="separator"]:hover { + background-color: var(--resizer-color); +} + +/* row numbers */ +.custom-hightable tbody [role="rowheader"] { + background-color: var(--row-label-background); + border-right: 1px solid var(--border-color); + color: var(--row-label-color); +} +/* highlight the selected rows */ +.custom-hightable tr[aria-selected="true"] { + background-color: var(--selected-row-background); +} +.custom-hightable tr[aria-selected="true"] [role="rowheader"] { + background-color: var(--selected-row-header-background); +} + +/* table corner */ +/* TODO: find a better selector for the table corner */ +.custom-hightable thead td:first-child { + background-color: var(--table-corner-logo-background); + border-right: 1px solid var(--border-color); +} +.custom-hightable thead td:first-child[aria-disabled="false"] { + background: var( + --table-corner-background + ); /* redundant with td:first-child, but allows to force the background if it has been overridden with a logo */ +} + +/* pending table state */ +.custom-hightable thead th::before { + background-color: var(--top-bar-background-color); +} diff --git a/hightable/src/CustomTheme.tsx b/hightable/src/CustomTheme.tsx new file mode 100644 index 0000000..1091b45 --- /dev/null +++ b/hightable/src/CustomTheme.tsx @@ -0,0 +1,13 @@ +import { HighTable } from 'hightable' +import { useState } from 'react' +import './CustomTheme.css' +import { data } from './data' +import Layout from './Layout' + +export default function CustomTheme() { + const [, setSelection] = useState(undefined) + + return + + +} diff --git a/hightable/src/Layout.tsx b/hightable/src/Layout.tsx index 8da91b5..fc8aca8 100644 --- a/hightable/src/Layout.tsx +++ b/hightable/src/Layout.tsx @@ -13,6 +13,7 @@ export default function Layout({ children }: { children: ReactNode }) { ['Controlled', '/controlled'], ['Mirror', '/mirror'], ['Unstyled', '/unstyled'], + ['Custom Theme', '/custom-theme'], ].map(([label, path]) => isActive ? 'link active' : 'link' } >{label}, diff --git a/hightable/src/Unstyled.tsx b/hightable/src/Unstyled.tsx index 0476f33..e0af9ec 100644 --- a/hightable/src/Unstyled.tsx +++ b/hightable/src/Unstyled.tsx @@ -3,7 +3,7 @@ import { useState } from 'react' import { data } from './data' import Layout from './Layout' -export default function Basic() { +export default function Unstyled() { const [, setSelection] = useState(undefined) return diff --git a/hightable/src/main.tsx b/hightable/src/main.tsx index c27d073..4438c3a 100644 --- a/hightable/src/main.tsx +++ b/hightable/src/main.tsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client' import { HashRouter, Route, Routes } from 'react-router' import Basic from './Basic.js' import Controlled from './Controlled.js' +import CustomTheme from './CustomTheme.js' import Mirror from './Mirror.js' import Selection from './Selection.js' import Unstyled from './Unstyled.js' @@ -17,5 +18,6 @@ ReactDOM.createRoot(app).render( } /> } /> } /> + } /> ) From 6e759923d094033355e740d95572425678b60d3e Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Tue, 18 Mar 2025 22:57:11 +0100 Subject: [PATCH 3/4] fix lint issues --- hightable/eslint.config.js | 7 +++++++ hightable/src/CustomTheme.tsx | 2 +- hightable/src/Unstyled.tsx | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/hightable/eslint.config.js b/hightable/eslint.config.js index d919ae6..d8e93a7 100644 --- a/hightable/eslint.config.js +++ b/hightable/eslint.config.js @@ -78,6 +78,13 @@ export default tseslint.config( '@typescript-eslint/restrict-template-expressions': 'off', '@typescript-eslint/no-unused-vars': 'warn', + + // allow using any - see row.ts - it's not easy to replace with unknown for example + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/use-unknown-in-catch-callback-variable': 'off', + '@typescript-eslint/prefer-promise-reject-errors': 'off', + '@typescript-eslint/no-unsafe-assignment': 'off', + '@typescript-eslint/no-unsafe-return': 'off', }, }, ) diff --git a/hightable/src/CustomTheme.tsx b/hightable/src/CustomTheme.tsx index 1091b45..a1558ed 100644 --- a/hightable/src/CustomTheme.tsx +++ b/hightable/src/CustomTheme.tsx @@ -1,4 +1,4 @@ -import { HighTable } from 'hightable' +import { HighTable, Selection } from 'hightable' import { useState } from 'react' import './CustomTheme.css' import { data } from './data' diff --git a/hightable/src/Unstyled.tsx b/hightable/src/Unstyled.tsx index e0af9ec..d1cb12a 100644 --- a/hightable/src/Unstyled.tsx +++ b/hightable/src/Unstyled.tsx @@ -1,4 +1,4 @@ -import { HighTable } from 'hightable' +import { HighTable, Selection } from 'hightable' import { useState } from 'react' import { data } from './data' import Layout from './Layout' From d3dc48b3757ed5bd6a5d4deac2cccbb7a22ee7d9 Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Fri, 21 Mar 2025 10:38:14 +0100 Subject: [PATCH 4/4] upgrade hightable to 0.13.0 --- hightable/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hightable/package.json b/hightable/package.json index ef18a72..6cbd3ea 100644 --- a/hightable/package.json +++ b/hightable/package.json @@ -14,7 +14,7 @@ "typecheck": "tsc" }, "dependencies": { - "hightable": "../../hightable/hightable-0.12.1.tgz", + "hightable": "0.13.0", "react": "18.3.1", "react-dom": "18.3.1", "react-router": "7.3.0"