{"id":18999919,"url":"https://github.com/vaheqelyan/react-keyview","last_synced_at":"2025-04-22T16:52:25.283Z","repository":{"id":57333674,"uuid":"159809027","full_name":"vaheqelyan/react-keyview","owner":"vaheqelyan","description":"React components to display the list, table, and grid, without scrolling, use the keyboard keys to navigate through the data","archived":false,"fork":false,"pushed_at":"2018-12-02T12:27:12.000Z","size":39,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-13T19:14:52.371Z","etag":null,"topics":["components","data","grid","keyboard","keys","list","navigation","react","table","tabular-data"],"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/vaheqelyan.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}},"created_at":"2018-11-30T10:42:39.000Z","updated_at":"2025-01-26T18:30:28.000Z","dependencies_parsed_at":"2022-09-05T16:31:25.352Z","dependency_job_id":null,"html_url":"https://github.com/vaheqelyan/react-keyview","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaheqelyan%2Freact-keyview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaheqelyan%2Freact-keyview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaheqelyan%2Freact-keyview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaheqelyan%2Freact-keyview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vaheqelyan","download_url":"https://codeload.github.com/vaheqelyan/react-keyview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249948995,"owners_count":21350094,"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":["components","data","grid","keyboard","keys","list","navigation","react","table","tabular-data"],"created_at":"2024-11-08T18:05:42.719Z","updated_at":"2025-04-22T16:52:25.220Z","avatar_url":"https://github.com/vaheqelyan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-keyview\n\n![](https://res.cloudinary.com/dmtrk3yns/image/upload/q_auto:best/v1543671214/react-keyview/ezgif-4-8cd8c7d7e66d.gif)\n\n---\n\n### Installation\n\n---\n\n**via NPM**\n\n```code\nnpm i react-keyview\n```\n\n**via Yarn**\n\n```code\nyarn add react-keyview\n```\n\n**via CDN (unpkg)**\n\n```code\nhttps://unpkg.com/react-keyview@latest\n```\n\nUMD library exposed as `ReactKeyView`\n\n```js\nconst KV = ReactKV;\n```\n\n\u003e **Note.** This package does not provide any stylesheet resources, the components are highly customizable. It is also supports Server-side rendering\n\n### Demos\n\n- [List](http://react-keyview.surge.sh/List/dist/)\n- [Table](http://react-keyview.surge.sh/Table/dist/)\n- [Grid](http://react-keyview.surge.sh/Grid/dist/)\n\n### Usage\n\nYou can import any component you want as a named export from 'react-keyview', eg.\n\n```jsx\nimport { Grid, Table } from \"react-keyview\";\n```\n\nOr you can directly import only the components you need, like so.\n\n```jsx\nimport Grid from \"react-keyview/build/Grid\";\nimport Table from \"react-keyview/build/Table\";\n```\n\nUMD modules has prefix ReactKV, eg.\n\n```jsx\nconst Grid = ReactKVGrid;\nconst List = ReactKVList;\n```\n\n#### List\n\n---\n\n```jsx\nfunction renderRow(rowIndex, currentIndex) {\n  return \u003cdiv\u003e{rowIndex}\u003c/div\u003e;\n}\n\n\u003cList renderRow={this.renderRow} count={YOUR_DATA.length} visibleCount={5} rowHeight={50} /\u003e;\n```\n\n| Prop         |   Type   |                        Description |\n| ------------ | :------: | ---------------------------------: |\n| renderRow    | Function |               Renders a single row |\n| count        |  Number  |                 Number of elements |\n| rowHeight    |  Number  |                         Row height |\n| visibleCount |  Number  |         The visible elements count |\n| dom          |  Object  | Pass attributes to an HTML element |\n\n#### Table\n\n---\n\n```jsx\nfunction renderHeader(item) {\n  return item;\n}\nfunction renderRowColumn(i, j) {\n  var getRowColumn = DATA[i][header[j]];\n  return \u003ctd key={UNIQUE_KEY}\u003e{getRowColumn}\u003c/td\u003e;\n}\n\nfunction renderRow(rowIndex, currentIndex, col) {\n  return \u003ctr key={UNIQUE_KEY}\u003e{col}\u003c/tr\u003e;\n}\n\n\u003cTable\n  header={header}\n  renderHeader={this.renderHeader}\n  renderRow={this.renderRow}\n  columnCount={3}\n  count={YOUR_DATA.length}\n  visibleCount={5}\n  rowHeight={50}\n  renderRowColumn={this.renderRowColumn}\n/\u003e;\n```\n\n| Prop            |   Type   |                        Description |\n| --------------- | :------: | ---------------------------------: |\n| visibleCount    |  Number  |             Number of visible rows |\n| count           |  Number  |                     Number of rows |\n| header          |  Array   |        Must be an array of strings |\n| renderHeader    | Function |          Number of visible columns |\n| renderRow       | Function |                        Renders row |\n| renderRowColumn | Function |     Renders the columns of the row |\n| dom             |  Object  | Pass attributes to an HTML element |\n\n#### Grid\n\n---\n\n```jsx\nfunction renderer({ rowIndex, columnIndex, yIndex, xIndex }) {\n  return (\n    \u003ctd key={UNIQUE_KEY}\u003e\n      Item {columnIndex},{rowIndex}\n    \u003c/td\u003e\n  );\n}\n\n\u003cGrid\n  renderer={this.renderer}\n  visibleRows={6}\n  rowCount={100}\n  rowWidth={30}\n  columnCount={100}\n  visibleColumns={6}\n  columnHeight={50}\n/\u003e;\n```\n\n| Prop           |   Type   |                        Description |\n| -------------- | :------: | ---------------------------------: |\n| columnCount    |  Number  |                  Number of columns |\n| visibleColumns |  Number  |          Number of visible columns |\n| rowCount       |  Number  |                    Number of lines |\n| visibleRows    |  Number  |             Number of visible rows |\n| renderer       | Function |        Displays the row and column |\n| dom            |  Object  | Pass attributes to an HTML element |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaheqelyan%2Freact-keyview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvaheqelyan%2Freact-keyview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaheqelyan%2Freact-keyview/lists"}