React-url-table NPM

react-url-table

Build data grid just by URL. Based on React16 hooks and mobx-react. MIT License.

Screenshot Check Component storybook

Install

# Yarn
yarn add react-url-table

# NPM
npm install --save react-url-table

ENV:

Typescript, Webpack, React 16 hooks, Mobx-react (for optimized store management)

Tests:

jest, enzyme, enzyme-adapter-react-16

Usage

 <UrlTable
    url="https://next.json-generator.com/api/json/get/4k6xmJ21r"
    headers={['Name', 'Age', 'Eyes', 'Phone', 'Favorite fruit']}
    fields={['name', 'age', 'eyeColor', 'phone', 'favoriteFruit']}
    pagination={{
        pageSize: 5
    }}
    indexField={'_id'}
/>

Features

load by URL or display local data
pagination
sorting by multiple columns
global search
search by specified column
custom render components
select single or multiple rows
edit cells

Component Props

Prop	Type	Required	Default	Info
data	Array	yes/no	-	Array of objects {}, {}. property data or url required
url	String	yes/no	-	Property data or url required
fetchSuccess	Function	no	-	(res: any) => []. This function will be called to map/parse data request from before render
fields	Array of Strings or IFieldPropObject	yes	-	You can pass any deep property name of object in prop-dot format `prop1.prop2`
headers	Array of Strings or IHeaderPropObject	no	-	don't specify this props if you want to render table without header
indexField	String	yes	-	uniq object property. used for performance index ('uuid', 'id', '_id')
search	Boolean	no	false	To use global search across all columns just pass `true`. It's possible to search just by specified columns
sorting	String or Boolean	no	'simple'	with 'simple' table data will be sorted by single column. Setting 'compound' allows you to make sorting by few columns at the same time. Do disable sorting use `false`
showSortingPanel	Boolean	no	true	show soring panel with badges of current sorting state
onSelect	Function	no	-	(record: SelectedRows[]) => void. This function will be called by table row clicking/selecting.
selectMode	String or Boolean	no	false	single \| multiple \| false . Highlight and execute `onSelect` callback by selecting one or few table rows.
loadingComponent	Function	no	-	(isLoading?: boolean) => React.ReactElement. Use custom Loading component
pagination	IPaginateProps or Boolean	no	{pageSize: 10,pageRangeDisplayed: 5,marginPagesDisplayed: 1},	For pagination it uses react-paginate component. You can pass any `react-paginate` property to `pagination`. Set `false` to hide pagination.
editable	Boolean	no	false	editable={true} makes all cells editable. NOTE: You can pass editable={boolean} in IHeaderPropObject to make certain cells editable
onEdit	Function	no	-	onEdit: (newValue: string, propertyName: string, record: IRecord) => void. This callback will be called after cell editing (onBlur)

NOTE: existing of property data or url is required to display table.
Configurable Cell:
interface IFieldPropObject {
    property: string,
    // IRecord is data object
    render?(cellValue: any, object: IRecord): string | React.ReactElement
}

Configurable Header:

interface IHeaderPropObject {
    name: string,
    property?: string,
    sortable?: boolean,
    searchable?: boolean,
    editable?: boolean,
    // render returns string or react element
    render?(name: string): string | React.ReactElement
}

Pagination Props:

For pagination it uses react-paginate component. You can pass any react-paginate property to pagination

import {ReactPaginateProps} from "react-paginate";

interface IPaginateProps extends Partial<ReactPaginateProps> {
    pageCount?: number,
    currentPage?: number,
    pageSize: number
}

Styles

import react-url-table/styles/index.css into your component. BTW you can override table styles by passing your custom className. Themes are based on CSS variables.

Note: pageSize property is required
Features TODO:
reorder rows (drag-n-drop)
reorder columns (drag-n-drop)
resize column width
custom row pattern/component
column highlighting (CSS only)
Themes supporting

react-url-table react table grid ui-table react-grid

classnames lodash react-paginate mobx mobx-react react react-dom

@infinitebrahmanuniverse/nolb-react-ur @everything-registry/sub-chunk-2621

5 years ago

5 years ago

5 years ago

5 years ago