Gathering detailed insights and metrics for reactabular-select
Gathering detailed insights and metrics for reactabular-select
Gathering detailed insights and metrics for reactabular-select
Gathering detailed insights and metrics for reactabular-select
npm install reactabular-select
Typescript
Module System
Node Version
NPM Version
JavaScript (96.12%)
EJS (3.28%)
CSS (0.6%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
917 Stars
2,350 Commits
137 Forks
21 Watchers
7 Branches
51 Contributors
Updated on Jul 11, 2025
Latest Version
7.0.0
Package Id
reactabular-select@7.0.0
Size
4.11 kB
NPM Version
3.10.3
Node Version
6.5.0
Published on
Nov 03, 2016
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
reactabular-select
provides a selection helper that makes it easier to track up/down arrows using React. Actual search logic is implemented by selectabular and you'll need to install it separately to your project. The same goes for reactabular-select
.
reactabular-select
API consists of two functions: select.byArrowKeys
and select.row
.
select.byArrowKeys({ rows: <rows>, selectedRowIndex: <number>, onSelectRow: (selectedRowIndex) => <any>})(<React element>)
select.byArrowKeys
is a React level helper that tracks up/down arrows. If there a selection (selectedRowIndex
), then it triggers onSelectRow
with the new selectedRowIndex
which you can then use to update your selection state.
The following example illustrates how to use reactabular-select
and selectabular
with a table. You can select a row by clicking in the following example. If there's a selection, you can move up and down using the arrow keys.
1/* 2import React from 'react'; 3import classnames from 'classnames'; 4import cloneDeep from 'lodash/cloneDeep'; 5import find from 'lodash/find'; 6import findIndex from 'lodash/findIndex'; 7import { 8 Table 9} from 'reactabular'; 10import { byArrowKeys } from 'reactabular-select'; 11import { compose } from 'redux'; 12import select from 'selectabular'; 13*/ 14 15const rows = [ 16 { 17 id: 100, 18 name: 'Adam', 19 age: 55 20 }, 21 { 22 id: 102, 23 name: 'Joe', 24 age: 12 25 }, 26 { 27 id: 101, 28 name: 'Brian', 29 age: 62 30 }, 31 { 32 id: 103, 33 name: 'Mike', 34 age: 22 35 }, 36 { 37 id: 104, 38 name: 'Jack', 39 age: 33 40 } 41]; 42 43const columns = [ 44 { 45 property: 'name', 46 header: { 47 label: 'Name' 48 } 49 }, 50 { 51 property: 'age', 52 header: { 53 label: 'Age' 54 } 55 } 56]; 57 58class SelectionTable extends React.Component { 59 constructor(props) { 60 super(props); 61 62 this.state = { 63 rows, 64 columns, 65 selectedRows: [] 66 }; 67 68 this.onRow = this.onRow.bind(this); 69 this.onSelectRow = this.onSelectRow.bind(this); 70 this.getSelectedRowIndex = this.getSelectedRowIndex.bind(this); 71 } 72 render() { 73 const { columns, rows, selectedRows } = this.state; 74 const selectedRowIndex = this.getSelectedRowIndex(selectedRows); 75 76 return byArrowKeys({ 77 rows, 78 selectedRowIndex, 79 onSelectRow: this.onSelectRow 80 })( 81 <div> 82 <Table.Provider 83 className="pure-table pure-table-striped" 84 columns={columns} 85 > 86 <Table.Header /> 87 88 <Table.Body 89 rows={rows} 90 rowKey="id" 91 onRow={this.onRow} 92 /> 93 94 <tfoot> 95 <tr> 96 <td>Selected: {selectedRows[0] && selectedRows[0].name}</td> 97 <td></td> 98 </tr> 99 </tfoot> 100 </Table.Provider> 101 </div> 102 ); 103 } 104 onRow(row, { rowIndex }) { 105 return { 106 className: classnames( 107 rowIndex % 2 ? 'odd-row' : 'even-row', 108 row.selected && 'selected-row' 109 ), 110 onClick: () => this.onSelectRow(rowIndex) 111 }; 112 } 113 onSelectRow(selectedRowIndex) { 114 const { rows } = this.state; 115 const selectedRowId = rows[selectedRowIndex].id; 116 117 this.setState( 118 compose( 119 select.rows(row => row.id === selectedRowId), 120 select.none 121 )(rows) 122 ); 123 } 124 getSelectedRowIndex(selectedRows) { 125 return findIndex(this.state.rows, { 126 id: selectedRows[0] && selectedRows[0].id 127 }); 128 } 129} 130 131<SelectionTable />
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 10/28 approved changesets -- score normalized to 3
Reason
1 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
170 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More