mui-row-select-table

Introduction

A Component for displaying large lists of tabular data from an external API.

Installation

yarn add mui-row-select-table

Code Example

Component

``js
import React from 'react'
import RowSelectTable from 'mui-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 = () => (
columnMetadata={getColumnMetadata()}
getRowId={(rowData) => 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 'mui-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 'mui-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> | 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 )

$3

Configuration for your columns.

Kind: inner typedef of 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.