npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@copart/row-select-table

v1.0.3

Published

Grid component with row-selection functionality

Downloads

146

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

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 = () => <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 '@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

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> | 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.