![Gitter](https://badges.gitter.im/Join Chat.svg)
Griddle is a simple grid Component for use with React. It depends on underscore.js 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:
npm install -g grunt-cli
if you don't have grunt.npm install
grunt
- 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.
###Changelog:### 0.2.0
- 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. - 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
- 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 - Infinite Scrolling - Infinite scrolling can be toggled instead of the default pagination. View infinite scrolling docs
- New Documentation Site - The documentation site is a bit more thorough and no longer a single page. Check it out here
Breaking Changes:
- 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.
- 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:
- Updated some of the documentation to note forthcoming changes to ExternalResults etc.
- Custom cell components now have a property
rowData
as well as thedata
. See here for more info - Components reference just
React
now instead ofReact/Addons
.
0.1.18:
- Fixed a bug where initialSort property wasn't getting used
- Added initialSortAscending prop (defaults to true)
- Removed references to bootstrap
- Fixed an issue with filtering and external results
- External Results fixes/enhancements
- Metadata enhancements