Introduction

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

Installation

yarn add mui-row-select-table

Code Example

Component

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 = () => <i className='material-icons'>remove_red_eye</i>

const getColumnMetadata = () => [
  column('first_name', 'First Name', {}),
  column('last_name', 'Last Name', {}),
  column('home_planet', 'Home Planet', {}),
]

const RowSelectTableExample = () => (
  <RowSelectTable
    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

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

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 )

RowSelectTable~ColumnMetadataObject

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.