68 | )});
69 |
70 | export default ComposedColumnSettings;
71 |
--------------------------------------------------------------------------------
/src/components/ColumnDefinition.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export default class ColumnDefinition extends Component {
5 | static propTypes = {
6 | //The name of the column that this definition applies to.
7 | id: PropTypes.string.isRequired,
8 |
9 | //The order that this column appears in. If not specified will just use the order that they are defined
10 | order: PropTypes.number,
11 |
12 | //Determines whether or not the user can disable this column from the settings.
13 | locked: PropTypes.bool,
14 |
15 | //The css class name, or a function to generate a class name from props, to apply to the header for the column.
16 | headerCssClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
17 |
18 | //The css class name, or a function to generate a class name from props, to apply to this column.
19 | cssClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
20 |
21 | //The display name for the column. This is used when the name in the column heading and settings should be different from the data passed in to the Griddle component.
22 | title: PropTypes.string,
23 |
24 | //The component that should be rendered instead of the standard column data. This component will still be rendered inside of a TD element.
25 | customComponent: PropTypes.func,
26 |
27 | //The component that should be used instead of the normal title
28 | customHeadingComponent: PropTypes.func,
29 |
30 | //Can this column be filtered
31 | filterable: PropTypes.bool,
32 |
33 | //Can this column be sorted
34 | sortable: PropTypes.bool,
35 |
36 | //What sort type this column uses - magic string :shame:
37 | sortType: PropTypes.string,
38 |
39 | //Any extra data that should be passed to each instance of this column
40 | extraData: PropTypes.object,
41 |
42 | //The width of this column -- this is string so things like % can be specified
43 | width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
44 |
45 | //The number of cells this column should extend. Default is 1.
46 | colSpan: PropTypes.number,
47 |
48 | // Is this column visible
49 | visible: PropTypes.bool,
50 |
51 | // Is this column metadta
52 | isMetadata: PropTypes.bool,
53 | };
54 |
55 | render() {
56 | return null;
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/CellContainer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from '../utils/griddleConnect';
4 | import getContext from 'recompose/getContext';
5 | import mapProps from 'recompose/mapProps';
6 | import compose from 'recompose/compose';
7 |
8 | import {
9 | customComponentSelector,
10 | cellValueSelector,
11 | cellPropertiesSelectorFactory,
12 | classNamesForComponentSelector,
13 | stylesForComponentSelector
14 | } from '../selectors/dataSelectors';
15 | import { valueOrResult } from '../utils/valueUtils';
16 |
17 | function hasWidthOrStyles(cellProperties) {
18 | return cellProperties.hasOwnProperty('width') || cellProperties.hasOwnProperty('styles');
19 | }
20 |
21 | function getCellStyles(cellProperties, originalStyles) {
22 | if (!hasWidthOrStyles(cellProperties)) { return originalStyles; }
23 |
24 | let styles = originalStyles;
25 |
26 | // we want to take griddle style object styles, cell specific styles
27 | if (cellProperties.hasOwnProperty('style')) {
28 | styles = Object.assign({}, styles, originalStyles, cellProperties.style);
29 | }
30 |
31 | if (cellProperties.hasOwnProperty('width')) {
32 | styles = Object.assign({}, styles, { width: cellProperties.width });
33 | }
34 |
35 | return styles;
36 | }
37 |
38 | const mapStateToProps = () => {
39 | const cellPropertiesSelector = cellPropertiesSelectorFactory();
40 | return (state, props) => {
41 | return {
42 | value: cellValueSelector(state, props),
43 | customComponent: customComponentSelector(state, props),
44 | cellProperties: cellPropertiesSelector(state, props),
45 | className: classNamesForComponentSelector(state, 'Cell'),
46 | style: stylesForComponentSelector(state, 'Cell'),
47 | };
48 | };
49 | }
50 |
51 | const ComposedCellContainer = OriginalComponent => compose(
52 | connect(mapStateToProps),
53 | mapProps(props => {
54 | return ({
55 | ...props.cellProperties.extraData,
56 | ...props,
57 | className: valueOrResult(props.cellProperties.cssClassName, props) || props.className,
58 | style: getCellStyles(props.cellProperties, props.style),
59 | value: props.customComponent ?
60 | this._scrollable = ref} style={scrollStyle} onScroll={this._scroll}>
49 |
50 |
51 | );
52 | }
53 |
54 | _scroll = () => {
55 | const { setScrollPosition, RowHeight } = this.props;
56 | const { scrollTop } = this.state;
57 |
58 | if (this._scrollable && Math.abs(this._scrollable.scrollTop - scrollTop) >= RowHeight) {
59 | setScrollPosition(
60 | this._scrollable.scrollLeft,
61 | this._scrollable.scrollWidth,
62 | this._scrollable.clientWidth,
63 | this._scrollable.scrollTop,
64 | this._scrollable.scrollHeight,
65 | this._scrollable.clientHeight
66 | );
67 | this.setState({ scrollTop: this._scrollable.scrollTop });
68 | }
69 | }
70 | });
71 |
72 | export default Table;
73 |
--------------------------------------------------------------------------------
/conduct.md:
--------------------------------------------------------------------------------
1 | # Code of Conduct
2 |
3 | ## All contributors and maintainers of this project are subject to this code of conduct.
4 |
5 | As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
6 |
7 | We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality.
8 |
9 | Examples of unacceptable behavior by participants include:
10 |
11 | * The use of sexualized language or imagery
12 | * Personal attacks
13 | * Trolling or insulting/derogatory comments
14 | * Public or private harassment
15 | * Publishing other's private information, such as physical or electronic addresses, without explicit permission
16 | * Other unethical or unprofessional conduct
17 |
18 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
19 |
20 | By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team.
21 |
22 | This code of conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.
23 |
24 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting a project maintainer at