Simple Grid Component written in React

Last update: Jun 11, 2022

Griddle

Needs more maintainers - Please see this issue

An ultra customizable datagrid component for React

Gitter Build Status


Please check out the documentation and examples.

TLDR: Griddle now has a customizable architecture that allows for one-off customizations or reusable plugins. These customization options allow for overriding everything from components, to internal datagrid state management, and more.


To use Griddle:

npm install griddle-react


To run from source:

  1. npm install
  2. npm run storybook

Issues:

If you run into an issue in Griddle please let us know through the issue tracker. It is incredibly helpful if you create a failing test(s) and/or a storybook story that demonstrates the issue as a pull request and reference this pull request in the issue. To add a storybook story, navigate to /stories/index.js and add a story to the storiesOf('Bug fixes' ...) section.

Contributing:

Please feel free submit any bugs. Any questions should go in the Gitter chat channel or stackoverflow. 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.

We do most of our initial feature development in the Storybook stories contained in this project. When you run npm run storybook, a web server is setup that quickly provides access to Griddle in various states. All storybook stories are currently in /stories/index.js

We would love any help at all but want to call out the following things:

  • Help maintaining 0.x
  • More tests - we have a number of tests in version 1.0 but not quite where we'd like it to be
  • More plugins

GitHub

https://github.com/GriddleGriddle/Griddle/
Comments
  • 1. Griddle 1.0

    The Road to Griddle 1.0


    Update ( Feb. 6, 2016): Griddle 1.0 pre-release docs are available here http://griddlegriddle.github.io/Griddle/next/

    Throughout the 6 months or so, we've been working on a new version of Griddle. It's not quite ready yet (alpha likely coming before Jan. 1, 2016) but we wanted to start communicating where we're at with it and where it's going.

    One of the biggest things that we've encountered with Griddle is that we would like to enable all sorts of features without making the codebase too bloated for those that want a more minimal grid. Too often we would add new features which added additional complexity. Over time, this complexity makes it harder to quickly add new features, harder to fix bugs, harder to avoid regressions, and a bit more difficult for others in the community to jump in and contribute.

    To address all these concerns, we began working on a new version of Griddle that is more modular. While the modularity doesn't single-handedly take care of the issues listed above, it does make tackling these things easier.

    New Architecture

    Griddle will now exist as a series of modules:

    • griddle-core - Grid state management
    • griddle-render - View components
    • griddle-connector - Connect the grid state to the view components

    In addition to these modules, the main Griddle (griddle-react) module will still exist as an opinionated default setup for using Griddle. Conceptually, the main Griddle component will import the other modules and pass set up a default configuration.

    Plugins

    Another big part of the new architecture is that we wanted to introduce plugins to the Griddle landscape. Instead of having subgrid / selection / remote / editing (not yet implemented), etc support as part of the default Griddle module, these features are added in as plugins. We are currently documenting how the plugins work in a lot more detail but for now, they can be thought of as a series of higher-order components and redux reducer / action creators (please see the selection plugin for more information on how they look in the meantime).

    We've had a lot of requests for awesome features that we would really like to see exist as plugins. Again there will be more documentation on how plugins work and how to create them in the coming weeks / months. Until then please see a couple of the core plugins.

    The Road to 1.0

    As noted above, we're trying to stay mostly consistent while still introducing some breaking changes (while still establishing a nice upgrade path). To that end, we're calling this Griddle 1.0 (obviously pre-release at this point) and are hoping to have the offical 1.0 release out sometime in the Spring of 2016.

    That all said, a very very early version of these components can be used today by taking the following, exhausting steps (if it's not abundantly clear -- these components are not production ready yet :smile:).

    1. Clone griddle-core, griddle-render, griddle-connector and griddle-test (this is a module that will be going away once we are wiring everything up inside the main Griddle component) and the various plugins listed in the organization (at the time of writing it is just subgrid and select).
    2. npm link all of the modules in griddle-test and npm-install & npm-start everything. Running npm-start in griddle-test should log that a webserver is running on port 3000.
    3. Visit http://localhost:3000 and try out the new Griddle components (and note that there is a lot of the styling / overall polish / performance type of things that we are still working on)

    As of this weekend, we're trying to place all of the things that are left to do and not currently being worked on into GitHub issues in their various projects. Any help / feedback would be much appreciated.

    The best place to discuss all this is in the comments here -- or the Griddle gitter.im channel :+1:

    Reviewed by ryanlanciaux at 2015-11-23 00:36
  • 2. Equivalent to rowData of CustomComponent in 1.0?

    Hi,

    I'm currently porting the 0.6 code to the 1.0 version. I've made use of the custom component to display date, and special annotations to the data that people can make to make some row stand out. Those custom component use rowData and metadata.parent from the automatically pass in props for custom components. Do we have an equivalent when using custom component defined in the ColumnDefinition ?

    Thanks!

    Reviewed by ThePainnn at 2017-02-27 15:46
  • 3. adds object/function filter to local plugin

    Griddle major version

    1.9.0

    Changes proposed in this pull request

    Extends the functionality of the LocalPlugin in order to allow more customised filtering (closes #746). With this PR you can now call setFilter() with an object { [key1]: [filter], [key2]:[filter] } or function(row){ } or an object with functions {[key]: function() {} }this allows for filtering across multiple fields with different fields.

    This allows for more customised behaviour. The object filter allows individual parts of the row to be filtered which can be used to build more complex filter UI. The default behaviour is AND across the object filter however you can also set the filter to be a function which is called with the entire row. This allows the user to do more logic in the filter e.g. XOR, OR etc.. on different row properties.

    This is backwards compatible so any existing custom filters will work. e.g.

    Data: { id: 1, name: "Bob", age: 20} , { id: 2, name: "Alice", age: 49} , { id: 3, name: "Jimmy", age: 47}, { id: 4, name: "Bob", age: 21}

    setFilter("Bob") // returns { id: 1, name: "Bob", age: 20}, { id: 4, name: "Bob", age: 21}

    setFilter({ name: "bob") // returns { id: 1, name: "Bob", age: 20}, { id: 4, name: "Bob", age: 21}

    setFilter({ name: "bob", age: function(age) { return age < 21; } ) // returns { id: 1, name: "Bob", age: 20}

    setFilter({ name: "bob", age: function(age) { return age < 49; } ) // returns { id: 1, name: "Bob", age: 20},{ id: 3, name: "Jimmy", age: 47}, { id: 4, name: "Bob", age: 21}

    setFilter(function(row) { return row.get("name") === "Bob" && row.get("age") < 21 } ) // returns { id: 1, name: "Bob", age: 20}

    Why these changes are made

    Needed this functionality for a project I am working on.

    Are there tests?

    Yes.

    Reviewed by benoj at 2017-10-05 21:39
  • 4. [Discussion] Change Griddle's internal store name

    We should consider changing the Griddle store name to be 'griddle' (as a default -- this name should be a prop) instead of using the default 'store'. This store is for griddle's internal state management but causes trouble when people are building custom components and want to connect to their app's store. There is a work around right now that I'm using in some of my apps where I build an HoC to pass 'store' as a prop to the custom component but this is perhaps not as clear as it could be?

    This is a breaking change and should cause a bump in major version if we go this route because anyone that has a custom component / plugin that connects on 'store' to get Griddle's data would have to take action to work with this change.

    Reviewed by ryanlanciaux at 2017-04-21 14:44
  • 5. Custom row component inside a GridTable?

    Brief backstory: My goal is to make an editable grid. Initially I thought I could do so by just adding a custom column through columnMetadata, but the custom column components that get created only have access to the column data and the row data (https://github.com/DynamicTyped/Griddle/blob/master/scripts/gridRow.jsx#L57). I would like to provide my EditableColumn with a save function and, ideally, have it wrap any other custom component that was defined in columnMetadata which would at least require access to the columnMetadata.

    I thought I could just use a custom row component to replace GridRow and give my custom column access to the data it needs, but I realized that Griddle uses custom rows for non-tables (https://github.com/DynamicTyped/Griddle/blob/master/scripts/griddle.jsx#L497).

    Questions:

    1. Any thoughts on the best way to accomplish this? My quickest option now that duplicates the least amount of code seems to be: just use a custom EditableColumn, ignore the nice-to-have feature of wrapping other custom column components with an EditableColumn, and hack in a save handler function as part of my data. Not exactly ideal but maybe there's a better solution I'm missing?

    2. It seems like custom rows (customRowComponent) and custom grids (customGridComponent) achieve very similar levels of customization and that there's room for having a custom row that is still within a GridTable. For instance, it seems to me that custom rows would make sense to replace GridRow here: https://github.com/DynamicTyped/Griddle/blob/master/scripts/gridRowContainer.jsx#L45 or maybe replace the row container one layer up in GridTable. Thoughts? I'm sure there would be other implications here I'm not seeing, but at first glance it seems like it would be an easy customization to add. If there's interest, I could put it in a PR for discussion.

    Thanks! And just as a side note: this seems like a great project. I'm impressed that it's so fleshed out and with such good docs given that React is so relatively new.

    Reviewed by nathanwelch at 2015-02-06 21:06
  • 6. InfiniteScrolling in 1.0

    Hello Griddle Team! Congrats on releasing 1.0. Looking forward to using it.

    Trying to migrate from 0.7.1 to 1.0 due to not being able to toggle column visibility out of the box and decided to just take the dive into 1.0.

    Does Griddle still support Infinite Scrolling by setting a prop on the Griddle component, or is it possible now to integrate in a library like react-virtualized to handle rendering the RowDefinition components needed for Griddle?

    Thanks!

    Reviewed by ZachStoltz at 2017-02-22 17:50
  • 7. Custom column width and Horizontal Scroll?

    Does Griddle support custom column width? Would be really nice to be able to specify column width as absolute (px) or relative (%). I believe currently the columns are equally sized as per available width.

    Also any chance of getting horizontal scroll for tables with a large no: of columns?

    Btw, great work guys, otherwise Griddle is nice, light and quite functional!

    Reviewed by mr-bobz at 2015-12-03 03:24
  • 8. visible property in columnMetaData seems to have no effect

    Setting the visible property to false seems to have no effect when rendering the table. The column with the visible property set to false is shown anyway. Am I wrong in this?

    Reviewed by nlien at 2015-03-12 16:14
  • 9. [Performance] All rows are re-rendered in the actual DOM whenever the application state changes

    Hi,

    I discovered a major performance issue when I tried to use the grid in my application with about 1000 rows (max results set to 10, infinite scrolling enabled). The rows are being re-rendered (in the actual DOM) whenever any state in the application changes. This is due to a new unique key that's being generated every time a row is rendered, so react thinks it's a new row every time and replaces everything in the actual DOM.

    A reproduction is shown here: http://jsfiddle.net/u0ue24ea/ Open the console and click on the "inc" button. I print to the console the DOM changes and you can see that all the rows are being replaced.

    I believe this should be addressed ASAP if people are going to rely on this grid for their apps.

    Thanks!

    Reviewed by ohana54 at 2015-03-02 16:44
  • 10. v0: fix React.createClass and PropTypes for react 16

    Griddle major version

    v0 (0.8.1)

    Changes proposed in this pull request

    use createReactClass from create-react-class package and PropTypes from prop-types package.

    Why these changes are made

    Make it compatible with React 16

    Reviewed by vakopian at 2017-10-11 20:22
  • 11. Additional columns in Griddle 0.5.1 - data below not showing

    I don't know if this was originally an unintended piece of functionality, or if it's broken now, but adding extra columns to an instance of Griddle no longer works in the current new version (0.5.1). I get a JSON response from an API which contains 5 fields, all of which are set to be displayed in the grid. However, I also need an extra column to be shown to include some other information, so I added another column to the columns array with a random name, and added the corresponding metadata (which refers to a customComponent) to the columnMetadata array.

    In version 0.3.1, this works and I see the information from the customComponent come through in that column. But in version 0.5.1, I can see the heading for the extra column, but the column below is empty and the customComponent isn't rendered (inserting a console.log into the custom component proves the code is never hit as nothing is written to the console).

    I don't remember this being documented anywhere at the time (it was very much a "hit and hope" scenario) but I thought I'd ask the question here in case it's known of, but I can't see any current issues open for it though, or if it's changed and I'm now doing something wrong?

    Code snippets:

    <Griddle columns={["sku","category","description","price","basketOptions"]} columnMetadata={[ ... removed other metadata for simplicity ... {columnName:"basketOptions",displayName:"Options",customComponent:BasketOptions}]} />

    and the customComponent (reduced to just show static text for simplicity) is:

    class DummyColumnComponent extends React.Component { render() { return( <div>text</div> ); } }

    Reviewed by jonifen at 2016-04-20 13:10
  • 12. Financing

    Hi :wave:,

    I'm Romuald from the Lsos, an organization that develops financial solutions for open source projects, and we are currently doing outreach to projects we like.

    One of our solutions is the Lsos Commons which I believe could fit; is that something Griddle would be interested in?

    If not I'm sorry for having opened this ticket and I'll close it :).

    Reviewed by brillout at 2020-06-17 08:55
  • 13. `customComponent` of type `object` supplied to `ColumnDefinition`, expected `function`. in ColumnDefinition in new griddle-react

    Griddle version

    "griddle-react": "1.13.1", but tested also on "1.13.0" "react-redux": "^7.2.0",

    Actual Behavior

    Failed prop type: Invalid prop customComponent of type object supplied to ColumnDefinition, expected function. in ColumnDefinition

    Any idea how to fix it ? Code is basically copied from documentation and still getting this error

    Steps to reproduce

    <ColumnDefinition id="serialNumber"
                                                             title={translate('recorders.serialNumber')}
                                                              customComponent={enhancedWithRowData(this.getRecorderSerialNumber)}
                                                              width={50}/>
    

    and

    private getRecorderSerialNumber = ({rowData}) => {
            return (
                <div className={style.link}>
                    <Link to={`/recorders/${rowData.id}/view`}>{rowData.serialNumber}</Link>
                </div>
            );
        };
    
            enhancedWithRowData: connect((internalState: any, props: any) => {
                return {
                    rowData: rowDataSelector(internalState, props)
                };
            }),
    
    export const rowDataSelector = (state: any, params: any) => {
        return state
            .get('data')
            .find(rowMap => rowMap.get('griddleKey') === params.griddleKey)
            .toJSON();
    }
    
    Reviewed by mkotar at 2020-05-28 10:54
  • 14. How to set the filter text externally

    I have to preserve the filter during page navigation. I was going through https://github.com/GriddleGriddle/Griddle/blob/master/src/components/Filter.js, but did not found any way to set the filter text externally. Below snippet filter the data properly but doesn't set the filter text. Need some indicators to proceed

    store.dispatch({ type: 'GRIDDLE_SET_FILTER', filter: this.props.filterText });

    Reviewed by Debananda at 2019-07-30 09:51
  • 15. Leak of memory

    Griddle version

    1.13.1

    Expected Behavior

    Actual Behavior

    Chrome JS Debugger notification about leak of memory

    Steps to reproduce

    Pull request with failing test or storybook story with issue

    3e8ba3c9da

    Reviewed by 1nstinct at 2019-07-30 07:55
  • 16. Update react-redux to 7

    Griddle major version

    Changes proposed in this pull request

    Remove storeKey and createProvider, use Provider instead

    Why these changes are made

    To support react-redux 7.x

    Are there tests?

    Tests are not breaking

    Reviewed by EASYMOUNTAIN at 2019-07-17 07:05
Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like

react-data-grid Install npm install react-data-grid react-data-grid is published as ES2019 modules, you'll probably want to transpile those down to sc

Jun 20, 2022
An Excel-like grid component for React with custom cell editors, performant scroll & resizable columns
An Excel-like grid component for React with custom cell editors, performant scroll & resizable columns

An Excel-like grid component for React with custom cell editors, performant scroll & resizable columns

Jun 15, 2022
A high-performance React grid component, with rich rendering and first-class TypeScript support.
A high-performance React grid component, with rich rendering and first-class TypeScript support.

Glide Data Grid We built Data Grid as the basis for the Glide Data Editor. It's a React component built on top of HTML Canvas. It scales to millions o

Jun 24, 2022
React Component used for displaying a responsive grid of aligned, variable width items
React Component used for displaying a responsive grid of aligned, variable width items

React Variable Width Grid When you need to responsively lay out a dynamic number of dynamically sized items. Demo Installation yarn add react-variable

May 15, 2022
React Data Grid with Spreadsheet Look & Feel. Official React wrapper for Handsontable.
React Data Grid with Spreadsheet Look & Feel. Official React wrapper for Handsontable.

Important information We permanently moved this project to the main Handsontable repository at https://github.com/handsontable/handsontable/tree/maste

Jun 19, 2022
Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components
Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components

Module SonarCloud Status ag-grid-community ag-grid-enterprise ag-Grid ag-Grid is a fully-featured and highly customizable JavaScript data grid. It del

Jun 27, 2022
A powerful Bootstrap-like responsive grid system for React.

React Grid System A powerful Bootstrap-like responsive grid system for React. ⚠️ Upgrading to v7 react-grid-system v7 adds a new screen class xxl for

Jun 15, 2022
Virtual Grid for React
Virtual Grid for React

React Virtual Grid Demo High performance virtual grid. This is a low level component for building fast tables. This component does not load any data a

Jun 23, 2022
Responsive React Flexbox Grid System

Reflexbox Responsive React Flexbox Grid System http://jxnblk.com/reflexbox Features Simple API for quickly controlling layout Helps promote composabil

Jun 8, 2022
🤸 Configurable grid and layout engine for React
🤸 Configurable grid and layout engine for React

gymnast is a configurable grid for React With gymnast, you can eliminate your layout css or reduce it to just a few lines. Learn how to use gymnast in

May 7, 2022
Empower Your Data with the best React Data Grid there is
Empower Your Data with the best React Data Grid there is

See the demo | Explore the docs Table of Contents Purpose Problem Solution Installation & Getting Started TypeScript support Features Community Editio

Jun 22, 2022
Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance 🔋
Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible  performance 🔋

Powerful data grid component built with StencilJS. Support Millions of cells and thousands of columns easy and efficiently for fast data rendering. Ea

Jun 27, 2022
A modular table, based on a CSS grid layout, optimized for customization.
A modular table, based on a CSS grid layout, optimized for customization.

react-grid-table A modular table, based on a CSS grid layout, optimized for customization. Supported features: Async support Sort by column Column res

Jun 15, 2022
Useful Grid/Hidden algorithm from Material-UI

React Fast Grid (+ Hidden) Demo Useful algorithm extracted from Material-UI Grid and Material-UI Hidden npm install react-fast-grid IE11 Comptability

Oct 28, 2020
Simple data-table component with React
Simple data-table component with React

React Table It Data table component with React Demo Installation $ npm i @emp/reactable or $ yarn add @emp/reactable Usage import Table from '@empd/re

Nov 17, 2020
SmartTable.js - Smart and simple react bootstrap table

SmartTable.js - Smart and simple react bootstrap table

Jan 2, 2022
A simple proof-of-concept probabilistic spreadsheet in React with Material-UI.

A simple proof-of-concept probabilistic spreadsheet in React with Material-UI.

Jun 3, 2022
A simple table library with built in sorting, pagination, selection, expandable rows and customizable styling.

React Data Table Component Demo and Examples Key Features Requirements Installation Logging Issues and Contributions API and Usage Columns column.hide

Jun 21, 2022
React Table - React table component with useful functions
React Table - React table component with useful functions

React Table - React table component with useful functions

Jun 22, 2022