Package Exports

react-expandable-table-cell

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-expandable-table-cell) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-expandable-table-cell

React table cell that allows you to easily expand and edit cells

Expandable Cell Demo

Install

npm install react-expandable-table-cell

Basic Usage

Code Sandbox

Usage of Props 'readOnly'

Code Sandbox

Usage of Props 'type'

Code Sandbox

Usage of Props 'expandOnOneClick'

Code Sandbox

Features

Supports All modern browsers
No style library is used to style the components. vanilla css is used.
No extra dependencies except React
customizing internal css is very easy. Just edit react-expandable-table-cell/dist/index.css file
Provide specific error message when something is wrong

API

ExpandableCell.defaultProps = {
  onBlur: undefined,
  onChange: undefined,
  expandOnOneClick: false,
  type: 'text',
  readOnly: false,
  stylesOnEdit: { maxWidth: null, maxHeight: null }
}

ExpandableCell.propTypes = {
  initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    .isRequired,
  rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  columnId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    .isRequired,
  onBlur: PropTypes.func,
  onChange: PropTypes.func,
  type: PropTypes.oneOf(['text', 'number']).isRequired,
  expandOnOneClick: PropTypes.bool,
  readOnly: PropTypes.bool,
  stylesOnEdit: PropTypes.object
}

Supported browsers

We use browserslist config to state the browser support for this lib, so check it out on browserslist.dev.

Note

Feel free to open issue. React-expandable-table-cell Github repo. Any idea that might improve the quality of this package or any kind of bug report will be highly appreciated.
We'll highly appreciate it if you promote this package to other devs in any way. We believe the appropriate usage of this package will save loads of time.