react-watertable

0.1.22 • Public • Published

React Watertable

npm version

screenshot

A table with advanced editable controls. Great for admin panels, customer portals and building in-house tools where something like airtable would be used.

Check out the demo here.

Watertable values simplicity, great user experience and extensive capability.

Usage

import React from "react"
import Watertable from "react-watertable"
 
const mySchema = {
  name: {
    title: "Name",
    type: "text"
  },
  color: {
    title: "Favorite Color",
    type: "select",
    options: [
      { value: "red", label: "Red", color: "#f00" },
      { value: "blue", label: "Blue", color: "#00f" }
    ]
  }
}
 
const MyApp = () => (
  <Watertable
    schema={mySchema}
    data={[{ name: "Charlie", color: "red" }, { name: "Sarah", color: "blue" }]}
  />
)

Features

  • Validate user input
  • Editable/read-only cells
  • Asynchronous row retrieval (i.e. make API calls to populate table)
  • Asynchronous option retrieval/search
  • Filtering and sorting
  • Hiding columns
  • Nested objects as cell values
  • Custom cell types

Props

Props Type Description
schema {[ColumnName: string]: SchemaDefinition} Describes the data type of each column.
data Array<Object> (optional) All the rows of the table.
getData (DataSearchQuery) => Promise<Array<Object>> (optional) Method to retrieve data.
renderCell (schemaInfo, value, onChange) => React.Component (optional) Method to render a cell. Return null to fallback to watertable renderer.
onChangeData (newData) => any (optional) Called whenever a cell has changed.
onSave (newData: Array<Object>) => any (optional) If specified, a save button is placed in the table header. This method is called on save press.
getOptions (columnName: string, input: string) => Promise<Array<Option>> (optional) Columns without static options will call this method on user input.
onChangeDisplayConfig (DisplayConfig) => any (optional) Called whenever the view changes e.g. column width changes, filter applied. If not specified, all display configuration disabled.
onChangeSchema (TableSchema) => any (optional) Called when schema is modified. If not specified, schema changes are disabled.
tablename string (optional) Displayed above table data.
onUpdateCell
onDeleteRow (record: Object) => any
canAddMore boolean
canDelete boolean
recordActions Array<string>
onClickRecordAction (record: Object, action: string) => any

Dependencies (10)

Dev Dependencies (17)

Package Sidebar

Install

npm i react-watertable

Weekly Downloads

2

Version

0.1.22

License

none

Unpacked Size

81.4 kB

Total Files

42

Last publish

Collaborators

  • seveibar