Join us here 

Griddle is a simple grid Component for use with React. It depends on Lodash Modules and React.

Please check out the documentation and examples.

To use Griddle:

npm install griddle-react

Or

download and reference griddle.js from the build directory (npm is preferred).

To run from source, type the following commands into a terminal:

1. npm install -g grunt-cli if you don't have grunt.
2. npm install
3. grunt
4. That's it!

Griddle is not yet version 1. There are likely some areas that will change and some issues that you may encounter. Please submit issues / pull requests for anything you run into.

###Contributing:###

Please feel free submit any bugs or suggestions as issues. If you are having problems getting up and running please post in the Gitter chat and we'll try to help out. Pull requests are welcome but if you have an idea please post as an issue first to make sure everyone is on the same-page (and to help avoid duplicate work). If you are looking to help out but don't know where to start, please take a look at approved issues that don't have anyone assigned.

###Changelog:###

0.6.0

Add columnMetadata:

• sortDirectionCycle - (optional) an array of sort directions, specifying the order that they should cycle through as the user repeatedly clicks on the column heading. The default is [null, 'asc', 'desc']
• multiSort - (optional) an object of columns and sort direction to allow multiple sort for selected column

{
    columnName: "state",
    order: 4,
    locked: false,
    visible: true,
    multiSort: {
      columns: ['name'],
      orders: ['asc']
    }
  },

Changed columnMetadata:

• customCompareFn - (optional) a function comparator

Breaking changes Previous you had to write compare or compare2 to define your custom compare function, now it is only customCompareFn that based on number of arguments behaves as compare or compare2

0.5.0

• Support React 15
• Various bug fixes

Thanks @thangaduraicse, @Julusian, Yaohan Chen, and @Dem0n3D

0.4.0

• Remove the underscore dependencies and implement the use of lodash-modularized
• Support filter by column
• Various fixes

Thanks @dlong500, Chris Main, @astraw, Tony L. Kerz, @jsdmc, @kevinhughes27, @liorbentov, @bouk, @yorchv, and everyone else who has helped with 0.4.0!

0.3.0

• Pulling the React 0.14 update into a larger version update to prevent npm from assuming it's safe to update.

0.2.16

• Reverted to prevent an auto-upgrade to React 0.14.

0.2.15

• Upgrade to React 0.14 - big thanks to Sajin Shrestha (@sajinshrestha) on nearly single-handedly taking on this effort!

0.2.13

• Numerous bug fixes, additions.
• Additional notes will be added soon. ...

0.2.1 - 0.2.3

• Tweaks surrounding package.json dependencies.

0.2.0

1. Styling - Griddle now renders as a single HTML table by default. Additionally, if you don't want to use Griddle's styles they can be turned off with a property useGriddleStyles={false}. See more on styling.
2. External Results - External data should now be passed in via props rather than a callback. The Griddle callback is still available for those that wish to use it but it's now in a separate module. More on External Data
3. Custom Components - In addition to swapping out the column or row with a custom component, it's now possible to switch out the entire grid with a custom component. For example, the data could initially be rendered as a chart. The data that makes up the chart could be displayed by clicking on settings and unchecking the Enable Custom Formatting option. Customization docs
4. Infinite Scrolling - Infinite scrolling can be toggled instead of the default pagination. View infinite scrolling docs
5. New Documentation Site - The documentation site is a bit more thorough and no longer a single page. Check it out here

Breaking Changes:

1. Updated the following properties:

• useCustomFormat changed to useCustomRowComponent
• useCustomPager changed to useCustomPagerComponent
• customFormat changed to customRowComponent
• customPager changed to customPagerComponent
• customFormatClassName changed to customRowComponentClassName
• allowToggleCustom to enableToggleCustom
• customNoData changed to customNoDataComponent
• Significantly changed getExternalResults. See the note below.

2. The getExternalResults property and loading data from an external source has been updated quite a bit.

• Rather than exposing a single method to load data, a series of 'external' properties are available to pass data to Griddle.
• For those that wish to use a callback and to support implementations before v0.2.0 using getExternalResults method, the GriddleWithCallback component was created. For more on GriddleWithCallback, view the documentation here.
• Check out the entire external data documentation to read more.

0.1.19:

1. Updated some of the documentation to note forthcoming changes to ExternalResults etc.
2. Custom cell components now have a property rowData as well as the data. See here for more info
3. Components reference just React now instead of React/Addons.

0.1.18:

1. Fixed a bug where initialSort property wasn't getting used
2. Added initialSortAscending prop (defaults to true)
3. Removed references to bootstrap
4. Fixed an issue with filtering and external results
5. External Results fixes/enhancements
6. Metadata enhancements