react-expandable-table-cell

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

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,
  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,
  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
}

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.

License

MIT © shawnscoding