react-url-table

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

!Screenshot
Check Component storybook

Install

``bash

Yarn

yarn add react-url-table

NPM

npm install --save react-url-table
`

$3

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

$3

jest, enzyme, enzyme-adapter-react-16

Usage

`jsx
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

$3

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


$3


`typescript
interface IFieldPropObject {
property: string,
// IRecord is data object
render?(cellValue: any, object: IRecord): string | React.ReactElement
}
`

$3

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

$3

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

`typescript
import {ReactPaginateProps} from "react-paginate";

interface IPaginateProps extends Partial {
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

$3

- [ ] reorder rows (drag-n-drop)
- [ ] reorder columns (drag-n-drop)
- [ ] resize column width
- [ ] custom row pattern/component
- [ ] column highlighting (CSS only)
- [ ] Themes supporting