# @copart/row-select-table
> Grid component with row-selection functionality
Latest version **1.0.3** (published 2022-10-23) · MIT license · 0 weekly downloads
## Install
```sh
npm install @copart/row-select-table
pnpm add @copart/row-select-table
yarn add @copart/row-select-table
bun add @copart/row-select-table
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-10-23 |
| First published | 2020-05-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 74.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | sidharth.mehra@copart.com |
| Maintainers | dbkokkirig, mdelong422, chandrashekar.gandla, arpeechara, srchakinal, ravikirancopart, akashpatti, nikhilnarula, shwetanairco, lizhangxcopart, raghurudraraju-copart, adganapath, jagannadhtipirneni, prasanth.ivs |
## Links
- npm: https://www.npmjs.com/package/@copart/row-select-table
- npm.io page: https://npm.io/package/@copart/row-select-table
## Dependencies (3)
- [ramda](https://npm.io/package/ramda.md) ^0.26.0
- [classnames](https://npm.io/package/classnames.md) 2.2.6
- [react-simple-dropdown](https://npm.io/package/react-simple-dropdown.md) 3.2.3
## Recent versions
- 1.0.3 (latest) — 2022-10-23
- 1.0.2 — 2020-12-08
- 1.0.1 — 2020-08-19
- 1.0.0 — 2020-05-27
- 1.0.0-alpha.0 — 2020-05-26
## README
## Introduction
A Component for displaying large lists of tabular data from an external API.
## Installation
`yarn add @copart/row-select-table`
## Code Example
**Component**
```js
import React from 'react'
import RowSelectTable from '@copart/row-select-table'
const column = (name, headerCellContent, other = {}) => ({
name,
headerCellContent,
sortable: true,
...other
})
const results = [
{ id: 0, first_name: 'Leia', last_name: 'Skywalker', home_planet: 'Naboo' },
{ id: 1, first_name: 'Darth', last_name: 'Vader', home_planet: 'Tatooine' },
{
id: 2,
first_name: 'Luke',
last_name: 'Skywalker',
home_planet: 'Tatooine'
},
{ id: 3, first_name: 'Han', last_name: 'Solo', home_planet: 'Unknown' },
{ id: 4, first_name: 'Rey', last_name: '', home_planet: 'Jakku' },
{ id: 5, first_name: 'Kylo', last_name: 'Ren', home_planet: 'Unknown' }
]
const renderAction = () => remove_red_eye
const getColumnMetadata = () => [
column('first_name', 'First Name', {}),
column('last_name', 'Last Name', {}),
column('home_planet', 'Home Planet', {})
]
const RowSelectTableExample = () => (
rowData.id}
noDataMessage={'No results found.'}
setPage={() => {}}
onRowClick={(rowData, e) => console.log('Row Clicked')}
results={results}
isLoading={false}
changeSort={() => {}}
setFilter={() => {}}
maxPage={2}
pageSize={20}
currentPage={0}
pageSizeOptions={[20, 40, 100]}
showSortableColumns={false}
stickyHeader={true}
/>
)
export default RowSelectTableExample
```
**Actions File**
```js
import { getActions } from '@copart/row-select-table'
// Actions can be used to dispatch to Redux on the respective events.
const { ready, load, clear, failed, setPage, changeSort, setFilter } = getActions('componentName')
```
**Reducers File**
```js
import { getReducer } from '@copart/row-select-table'
const componentReducer = (state = {}, action ) => {
default:
return state
}
export default getReducer(componentReducer, 'componentName', 20, '')
```
## Props
| Param | Type | Description |
| ------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| props | Object | |
| props.results | Array.<Object> | The data used to populate the rows. |
| props.columnMetadata | [Array.<ColumnMetadataObject>](#RowSelectTable..ColumnMetadataObject) | Information about how to display each column. |
| props.getRowId | function | For helping React generate a unique key for each row. This function is called once with each object in props.results. |
| props.onRowClick | function | A function that is called with an object from props.results when the corresponding row is clicked (or when the Enter is pressed while selected). |
| props.changeSort | function | Takes a sortColumn and sortAscending value as parameters--called when a sortable column's header is clicked. |
| props.setPage | function | Takes an object with page property (and optionally, pageSize) to change the currentPage and pageSize props. |
| props.maxPage | number | The last available page in your results. (For pagination in footer.) |
| props.pageSize | number | The number of rows per page. (For pagination in footer.) |
| props.pageSizeOptions | Array.<number> | The different options the user should be able to set for pageSize. (For pagination in footer) |
| props.currentPage | number | The current page. (For pagination in footer) |
| props.isLoading | bool | Whether or not to display a spinner. Set this value to false when your AJAX request resolves. |
| props.sortColumn | string | The column currently being used to sort the results. (For sort icon in header.) |
| props.sortAscending | bool | True for ascending, false for descending. (For sort icon in header) |
| props.noDataMessage | function | A function that returns a component to be displayed when there is no data available. Should be customised from Parent. |
| props.footerLabels | Object | Object containing footer labels that are displayed in the Footer Section. |
| props.rowSelectionEnabled | bool | True if RowSelction is enabled, false if RowSelection is not required |
| props.onSelectAllRows | function | A function that is called when selectAllRows checkbox is clicked. Mandatory when rowSelectionEnabled is true |
| props.onSelectRow | function | A function that is called when a row is selected by clicking checkbox. Mandatory when rowSelectionEnabled is true |
| props.isRowSelected | function | A function that is called for every row to indicate if the row is selected or not. Mandatory when rowSelectionEnabled is true |
| props.isAllRowsSelected | bool | True if all rows are selected. False if all rows are not selected. Mandatory when rowSelectionEnabled is true |
| props.showSortableColumns | bool | Optional prop that allows user to hide default icon for sortable icons. Defaulted to true. Pass false to hide icon |
| props.stickyHeader | bool | Optional prop that controls whether the header of the table is sticky when scrolling. Stickiness will cause the header to stay at the top even when scrolling past |
| props.stickyFooter | bool | Optional prop that controls whether the footer of the table is sticky when scrolling. Stickiness will cause the header to stay at the top even when scrolling past |
getActions('ComponentName') returns to you set of Actions that are component specific and allow you to dispatch unique actions and have multiple RowSelectTables throughout the application.
getReducer(componentReducer, componentName, initalPageSize, initialSortColumn )
### RowSelectTable~ColumnMetadataObject
Configuration for your columns.
**Kind**: inner typedef of [RowSelectTable](#RowSelectTable)
**Properties**
| Name | Type | Default | Description |
| ----------------- | -------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| columnName | string | | A key that matches a key in your props.results objects. |
| headerCellContent | string | number | React.Element | | The content of this column's header cell. |
| display | function | (val) => val | An optional function to transform your data in results before displaying it in the table. Should return a valid React node. |
| sortable | bool | false | Whether to allow sorting by clicking the column header. |
## Contributions
Contributions are welcome, create a Pull Request for any improvements/fixes.
---
_Source: https://npm.io/package/@copart/row-select-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._