{"id":20964543,"url":"https://github.com/hyparam/hightable","last_synced_at":"2025-05-14T09:32:44.622Z","repository":{"id":241461989,"uuid":"796087372","full_name":"hyparam/hightable","owner":"hyparam","description":"A dynamic windowed scrolling table component for react","archived":false,"fork":false,"pushed_at":"2024-11-13T20:15:05.000Z","size":258,"stargazers_count":8,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-14T07:05:01.053Z","etag":null,"topics":["component","data","dataset","grid","javascript","react","scrolling","table","virtualized","windowed"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hyparam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-04T22:29:37.000Z","updated_at":"2024-11-13T17:26:35.000Z","dependencies_parsed_at":"2024-09-26T21:15:51.912Z","dependency_job_id":"ed778ee0-370b-4ac6-a2e2-5034bfc3c95f","html_url":"https://github.com/hyparam/hightable","commit_stats":{"total_commits":66,"total_committers":1,"mean_commits":66.0,"dds":0.0,"last_synced_commit":"81745d87e6e2d1f0ff72d70de0f38f24a300115c"},"previous_names":["hyparam/hightable"],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyparam%2Fhightable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyparam%2Fhightable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyparam%2Fhightable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyparam%2Fhightable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyparam","download_url":"https://codeload.github.com/hyparam/hightable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225285492,"owners_count":17450057,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","data","dataset","grid","javascript","react","scrolling","table","virtualized","windowed"],"created_at":"2024-11-19T02:56:00.677Z","updated_at":"2024-11-19T02:56:01.207Z","avatar_url":"https://github.com/hyparam.png","language":"TypeScript","readme":"# HighTable\n\n![HighTable](hightable.jpg)\n\n[![npm](https://img.shields.io/npm/v/hightable)](https://www.npmjs.com/package/hightable)\n[![workflow status](https://github.com/hyparam/hightable/actions/workflows/ci.yml/badge.svg)](https://github.com/hyparam/hightable/actions)\n[![mit license](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n![coverage](https://img.shields.io/badge/Coverage-94-darkred)\n\nHighTable is a virtualized table component for React, designed to efficiently display large datasets in the browser. It loads and renders only the rows necessary for the current viewport, enabling smooth scrolling and performance even with millions of rows. HighTable supports asynchronous data fetching, dynamic loading, and optional column sorting.\n\n## Features\n\n - **Virtualized Scrolling**: Efficiently renders only the visible rows, optimizing performance for large datasets.\n - **Asynchronous Data Loading**: Fetches data on-demand as the user scrolls, supporting datasets of any size.\n - **Column Sorting**: Optional support for sorting data by columns.\n - **Column Resizing**: Allows for resizing columns to fit the available space and auto-sizing.\n - **Event Handling**: Supports double-click events on cells.\n - **Loading Placeholder**: Displays animated loading indicator per-cell.\n\n## Demo\n\nLive table demo: https://hyparam.github.io/hightable/. See the [source code](https://github.com/hyparam/hyperparam-cli/tree/master/apps/hightable-demo).\n\n## Installation\n\nEnsure you have React set up in your project. Install the HighTable package via npm:\n\n```sh\nnpm i hightable\n```\n\n## Data Model\n\nHighTable uses a data model called `DataFrame`, which defines how data is fetched and structured. The `DataFrame` object should have the following properties:\n\n - `header`: An array of strings representing the column names.\n - `numRows`: The total number of rows in the dataset.\n - `rows`: An asynchronous function that fetches rows. It should accept start and end row indices and return an array of row objects.\n - `sortable` (optional): A boolean indicating whether the table supports column sorting.\n\nEach row object should be a mapping of column names to cell values.\n\n## Usage\n\nHere's a basic example of how to use HighTable in your React application:\n\n```jsx\nimport HighTable from 'hightable'\n\nconst dataframe = {\n  header: ['ID', 'Name', 'Email'],\n  numRows: 1000000,\n  rows(start, end, orderBy) {\n    // fetch rows from your data source here\n    return fetchRowsFromServer(start, end, orderBy)\n  },\n  sortable: true,\n}\n\nfunction App() {\n  return (\n    \u003cHighTable\n      data={dataframe}\n      onError={console.error}\n    /\u003e\n  )\n}\n```\n\n## Props\n\nHighTable accepts the following props:\n\n```typescript\ninterface TableProps {\n  data: DataFrame // data provider for the table\n  focus?: boolean // focus table on mount? (default true)\n  onDoubleClickCell?: (col: number, row: number) =\u003e void // double-click handler\n  onError?: (error: Error) =\u003e void // error handler\n}\n```\n\nDataFrame is defined as:\n\n```typescript\ninterface DataFrame {\n  header: string[]\n  numRows: number\n  // rows are 0-indexed, excludes the header, end is exclusive\n  rows(start: number, end: number, orderBy?: string): AsyncRow[] | Promise\u003cRow[]\u003e\n  sortable?: boolean\n}\n```\n\n## Sortable DataFrame\n\nIf your data source supports sorting, set the sortable property to true in your DataFrame object. When sorting is enabled, the rows function will receive an additional orderBy parameter, which represents the column name to sort by.\n\nEnsure your rows function handles the orderBy parameter appropriately to return sorted data.\n\n## Async DataFrame\n\nHighTable supports async loading of individual cells.\nDataframes can return `AsyncRow[]` to return future cell data to the table.\n\n```javascript\nconst dataframe = {\n  header: ['a', 'b'],\n  numRows: 10,\n  rows(start, end) {\n    // resolvableRow makes a row where each column value is a wrapped promise with .resolve() and .reject() methods\n    const futureRows = Array.from({ length: end - start }, () =\u003e resolvableRow(this.header))\n    for (let row = start; row \u003c end; row++) {\n      for (const col of this.header) {\n        fetchCell(row, col).then(value =\u003e futureRows[row - start][col].resolve(value))\n      }\n    }\n    return futureRows\n  },\n}\n```\n\n## Styling\n\nHighTable includes basic CSS styling to make the table functional. You can customize the appearance of the table using CSS.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyparam%2Fhightable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyparam%2Fhightable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyparam%2Fhightable/lists"}