react-url-table

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

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