diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..a1f0b7a
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,11 @@
+{
+ "presets": ["react", "es2015", "stage-1"],
+ "env": {
+ "umd": {
+ "plugins": [
+ "add-module-exports",
+ "transform-es2015-modules-umd"
+ ]
+ }
+ }
+}
\ No newline at end of file
diff --git a/.npmignore b/.npmignore
index c0b28bf..40fe4ce 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,4 +1,6 @@
test
src
example
+webpack.config.js
+.babelrc
.module-cache
\ No newline at end of file
diff --git a/README.md b/README.md
index 4bc6055..12e6c40 100644
--- a/README.md
+++ b/README.md
@@ -1,29 +1,29 @@
-[![npm version](https://badge.fury.io/js/responsive-fixed-data-table.svg)](http://badge.fury.io/js/responsive-fixed-data-table)
# responsive-fixed-data-table
+[![npm version](https://badge.fury.io/js/responsive-fixed-data-table.svg)](http://badge.fury.io/js/responsive-fixed-data-table)
Responsive wrapper for [Facebook's Fixed-Data-Table](https://github.com/facebook/fixed-data-table) grids
## Installation
This module is available as an npm package.
- npm install [--save] responsive-fixed-data-table
+ npm install [--save] responsive-fixed-data-table
## Usage
+This module includes minified and non minified UMD builds as well as an ES6 build. You choose!
+
```js
-var React = require('react');
-var Column = require('fixed-data-table').Column;
-var ResponsiveFixedDataTable = require('responsive-fixed-data-table');
-
-var ResponsiveTable = React.createClass({
- render: function() {
- return (
-
-
-
- );
- }
-});
-
-module.exports = ResponsiveTable;
+import React from 'react';
+import ResponsiveFixedDataTable from 'responsive-fixed-data-table';
+import { Column } from 'fixed-data-table';
+
+export default class ResponsiveTable extends React.Component {
+ render() {
+ return (
+
+
+
+ );
+ }
+}
```
All passed props will be passed to the underlying FixedDataTable component. Please check [FixedDataTable docs](http://facebook.github.io/fixed-data-table/api-table.html) for a list of available options.
@@ -32,3 +32,6 @@ Width and height will be overriden to take all the available space of its parent
### Additional configuration
**containerStyle** *{Object}*: Additional styles to be set on the container div.
**refreshRate** *{Number}*: Time in milliseconds to debounce the resize handler.
+
+### React 0.13 compatibility
+If you want to use this module with old versions of React and FixedDataTable please check the **v1.5.0-deprecated** branch.
\ No newline at end of file
diff --git a/example/.babelrc b/example/.babelrc
new file mode 100644
index 0000000..014a6aa
--- /dev/null
+++ b/example/.babelrc
@@ -0,0 +1,3 @@
+{
+ "presets": ["react", "es2015", "stage-1"]
+}
\ No newline at end of file
diff --git a/example/gulpfile.js b/example/gulpfile.js
index 9c682e0..4d2c312 100644
--- a/example/gulpfile.js
+++ b/example/gulpfile.js
@@ -3,10 +3,6 @@
var gulp = require('gulp'),
rimraf = require('rimraf'),
runSequence = require('run-sequence'),
- source = require('vinyl-source-stream'),
- buffer = require('vinyl-buffer'),
- browserify = require('browserify'),
- reactify = require('reactify'),
modRewrite = require('connect-modrewrite'),
connect = require('gulp-connect');
@@ -24,19 +20,6 @@ var buildPaths = {
css: './build/assets/css/'
};
-// BUNDLER
-// - - - - - - - - - - - - - - -
-var bundler = browserify({
- entries: [paths.mainJs], // Only need initial file, browserify finds the deps
- transform: [
- reactify // We want to convert JSX to normal javascript
- ],
- debug: true, // Gives us sourcemapping
- cache: {},
- packageCache: {},
- fullPaths: true
-});
-
// TASKS
// - - - - - - - - - - - - - - -
// Cleans the build directory.
@@ -44,15 +27,6 @@ gulp.task('clean', function(cb) {
rimraf(buildPaths.main, cb);
});
-// Bundle files and minify for prod.
-gulp.task('bundle', function() {
- return bundler
- .bundle()
- .pipe(source('bundle.js'))
- .pipe(buffer())
- .pipe(gulp.dest(buildPaths.js));
-});
-
// Copies html file
gulp.task('copy-html-css', function() {
gulp.src(paths.mainHtml)
@@ -65,6 +39,7 @@ gulp.task('copy-html-css', function() {
gulp.task('server:start', function() {
return connect.server({
root: './build',
+ port: 8000,
middleware: function() {
return [
modRewrite(['^[^\\.]*$ /index.html [L]'])
@@ -75,7 +50,7 @@ gulp.task('server:start', function() {
// Builds the app prod ready.
gulp.task('build', function() {
- runSequence('clean', ['bundle'], 'copy-html-css', function() {
+ runSequence('clean', 'copy-html-css', function() {
console.log('Successfully built.');
});
});
diff --git a/example/package.json b/example/package.json
index 45e5089..7adef5a 100644
--- a/example/package.json
+++ b/example/package.json
@@ -21,22 +21,27 @@
],
"license": "MIT",
"scripts": {
- "start": "gulp"
+ "build": "./node_modules/.bin/gulp build && ./node_modules/.bin/webpack",
+ "start": "npm run build && ./node_modules/.bin/gulp server:start"
},
"dependencies": {
- "fixed-data-table": "^0.3.0",
- "react": "^0.13.3",
- "responsive-fixed-data-table": "^1.5.0"
+ "fixed-data-table": "^0.6.0",
+ "react": "^0.14.7",
+ "react-dom": "^0.14.7",
+ "responsive-fixed-data-table": "^2.0.0"
},
"devDependencies": {
- "browserify": "^10.2.4",
+ "babel-core": "^6.5.2",
+ "babel-loader": "^6.2.2",
+ "babel-preset-es2015": "^6.5.0",
+ "babel-preset-react": "^6.5.0",
+ "babel-preset-stage-1": "^6.5.0",
"connect-modrewrite": "^0.8.1",
"gulp": "^3.9.0",
"gulp-connect": "^2.2.0",
- "reactify": "^1.1.1",
"rimraf": "^2.4.0",
"run-sequence": "^1.1.0",
- "vinyl-buffer": "^1.0.0",
- "vinyl-source-stream": "^1.1.0"
+ "source-map-loader": "^0.1.5",
+ "webpack": "^1.12.13"
}
}
diff --git a/example/src/index.html b/example/src/index.html
index c36ba43..1dc4ff8 100644
--- a/example/src/index.html
+++ b/example/src/index.html
@@ -4,10 +4,11 @@
+