New examples for responsive resize, custom styling, and tooltips #59

wcjordan · 2016-10-09T20:20:47Z

Description

New examples for responsive resize, custom styling, and tooltips based on feature requests / suggestions in issues.
Also cleans up and standardizes examples and switches the to using pure components for performance.

Motivation and Context

This helps onboard new users, as it provides examples for common requests. It resolves commonly opened issues without a need for changes integrated directly into the library.

How Has This Been Tested?

Built the examples and tested them locally on my laptop.

Screenshots (if appropriate):

![tooltip](https://cloud.githubusercontent.com/assets/1034455/19223385/44c3555e-8e3c-11e6-979b-c60eca27a0c4.jpg) ## Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.

…nsions

wcjordan · 2016-10-09T20:23:36Z

examples/CollapseExample.js

            header={<Cell>First Name</Cell>}
-            cell={<TextCell data={dataList} col="firstName" />}


moved these to columnKey which I believe is more inline with best practices

wcjordan · 2016-10-09T20:24:31Z

examples/PaginationExample.js

    this._callback = callback;
  }

+  getDataVersion() {


Introduced a version field similar to what we do on LiveDesign so I could make the renderers pure for this example and get better performance

wcjordan · 2016-10-09T20:25:09Z

examples/ReorderExample.js

@@ -44,7 +28,7 @@ class ReorderExample extends React.Component {
    super(props);

    this.state = {
-      dataList: new FakeObjectDataListStore(1000000),
+      dataList: new FakeObjectDataListStore(10000),


I did this because this example is really jank with dev React (but fine with prod React). I can revert though if desired.

Can we revert and use production react?

Ya already using production react, but will switch this number back. I had just noticed the jankiness while dev'ing

wcjordan · 2016-10-09T20:25:59Z

examples/SortExample.js

@@ -27,7 +26,7 @@ class SortHeaderCell extends React.Component {
  }

  render() {
-    var {sortDir, children, ...props} = this.props;
+    var {onSortChange, sortDir, children, ...props} = this.props;


addresses facebookarchive/fixed-data-table#453

wcjordan · 2016-10-09T20:26:42Z

examples/StylingExample.js

+const React = require('react');
+const {StyleSheet, css} = require('aphrodite');
+
+class StylingExample extends React.Component {


Hopefully this example helps with issues like #51 and #47

I found some limitations though. The 3 wraps on the default cell make styling it hard. I couldn't style the border of FixedDataTableCellDefault. Also when the table width > total column width, I couldn't figure out how to style the extra header padding.

wcjordan · 2016-10-09T20:30:35Z

examples/old/ColumnGroupsExample.js

@@ -1,74 +0,0 @@
-/**


I deleted all the old examples folder. It was unused.

wcjordan · 2016-10-09T20:31:16Z

package.json

@@ -8,6 +8,7 @@
    "react-dom": ">=0.14.0 || ^0.14.0-beta3"
  },
  "devDependencies": {


Does it make sense for example dependencies to be tracked as devDependencies? Should React be tracked as a devDependency as well?

I'm not 100% sure. Doesn't NPM install these when someone uses these libs? Seems unnecessary if thats the case

I ran an experiment and did not see these installed when installing FDT from another repo.

It doesn't install any devDependencies transitively. See http://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies

wcjordan · 2016-10-09T20:32:28Z

site/examples/ExamplesPage.js

@@ -22,6 +22,7 @@ var ExampleHeader = require('./ExampleHeader');
 var ExamplesWrapper = require('./ExamplesWrapper');
 var React = require('react');
 var Constants = require('../Constants');
+const Dimensions = require('react-dimensions');


Switched the examples page to use react-dimensions as well to make life easier.

One downside is react-dimensions now spits out this warning on all the examples pages
digidem/react-dimensions#35

wcjordan · 2016-10-09T20:32:59Z

site/examples/examplesPageStyle.less

@@ -6,6 +6,7 @@



needed for the change to react-dimensions for responsive styling of the examples page

wcjordan · 2016-10-09T20:33:23Z

src/FixedDataTableCellDefault.react.js

+     * Below that entry point the user is welcome to consume or
+     * pass the prop through at their discretion.
+     */
+    rowIndex: PropTypes.number


fixes another issue with unknown propTypes in our examples

KamranAsif · 2016-10-10T11:45:33Z

examples/helpers/cells.js

+};
+module.exports.TextCell = TextCell;
+
+


nit: extra line

fixed, thanks!

writing too much python lately...

KamranAsif · 2016-10-10T11:46:27Z

examples/helpers/cells.js

+};
+module.exports.LinkCell = LinkCell;
+
+module.exports.PagedCell = ({data, ...props}) => {


Can we move this to be after PendingCell and move the exports to a new line, to follow the others

Sure, will do

KamranAsif · 2016-10-10T11:48:45Z

LGTM

wcjordan added 5 commits October 6, 2016 02:31

Fix unknown props warnings on examples

652e629

Improved example performance

494c05c

Add resonsive resize example and cleanup ExamplesPage with react-dime…

a2889ec

…nsions

Add styling and tooltip examples

439a63d

fix node_env

884d0c4

wcjordan assigned KamranAsif Oct 9, 2016

wcjordan mentioned this pull request Oct 9, 2016

Unknown props onSortChange, sortDir on <div> tag. facebookarchive/fixed-data-table#453

Open

wcjordan commented Oct 9, 2016

View reviewed changes

wcjordan mentioned this pull request Oct 9, 2016

Using Aphrodite to accomplish custom styles #51

Closed

KamranAsif reviewed Oct 10, 2016

View reviewed changes

wcjordan added 2 commits October 10, 2016 18:06

Merge branch 'master' into new_examples

5d790ed

PR changes

91074ae

wcjordan merged commit 53df937 into schrodinger:master Oct 10, 2016

wcjordan deleted the new_examples branch October 10, 2016 22:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New examples for responsive resize, custom styling, and tooltips #59

New examples for responsive resize, custom styling, and tooltips #59

wcjordan commented Oct 9, 2016 •

edited

Loading

wcjordan Oct 9, 2016

wcjordan Oct 9, 2016

wcjordan Oct 9, 2016 •

edited

Loading

KamranAsif Oct 10, 2016

wcjordan Oct 10, 2016

wcjordan Oct 9, 2016

wcjordan Oct 9, 2016 •

edited

Loading

wcjordan Oct 9, 2016

wcjordan Oct 9, 2016

KamranAsif Oct 10, 2016

wcjordan Oct 10, 2016

wcjordan Oct 9, 2016

wcjordan Oct 9, 2016

wcjordan Oct 9, 2016

KamranAsif Oct 10, 2016

wcjordan Oct 10, 2016

wcjordan Oct 10, 2016

KamranAsif Oct 10, 2016

wcjordan Oct 10, 2016

KamranAsif commented Oct 10, 2016

		header={<Cell>First Name</Cell>}
		cell={<TextCell data={dataList} col="firstName" />}

		};
		module.exports.TextCell = TextCell;

New examples for responsive resize, custom styling, and tooltips #59

New examples for responsive resize, custom styling, and tooltips #59

Conversation

wcjordan commented Oct 9, 2016 • edited Loading

Description

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Checklist:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wcjordan Oct 9, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wcjordan Oct 9, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KamranAsif commented Oct 10, 2016

wcjordan commented Oct 9, 2016 •

edited

Loading

wcjordan Oct 9, 2016 •

edited

Loading

wcjordan Oct 9, 2016 •

edited

Loading