@inovua/reactdatagrid-community

Empower Your Data with the best React Data Grid there is

Usage no npm install needed!

<script type="module">
  import inovuaReactdatagridCommunity from 'https://cdn.skypack.dev/@inovua/reactdatagrid-community';
</script>

README

Table of Contents

ReactDataGrid Community Edition

This is the Community Edition of ReactDataGrid.

The Community Edition is licensed under the MIT license.

For the Enterprise Edition please see this page.

Installation & Getting Started

Installing the ReactDataGrid Community Edition is as easy as:

$ npm install @inovua/reactdatagrid-community --save

See the documentation getting started page for more details.

TypeScript support

ReactDataGrid ships with TypeScript definition files so it's fully integrated with your preferred editor to help with autocompletion and type-safety.

Features

ReactDataGrid is packed with all the functionality you would expect from an enterprise-grade grid.

As stated before, ReactDataGrid is built with React in mind, so it supports popular patterns in the React world: controlled/uncontrolled props, render props, built with immutability in mind etc.

Here's a list of the features that we support in the Community Edition:

Besides the above, there's a lot more backed into the Enterprise Edition, so make sure you explore our documentation.

Documentation

We're heavily invested into our documentation - it ships with full working examples and a live editor. Each prop ReactDataGrid supports has it's own description and usage example.

Additionally, each feature is clearly presented and has a dedicated page that explains the feature and shows examples of real-life usage. See for example sorting, filtering, pagination etc.

Examples

import React from 'react';
import ReactDataGrid from '@inovua/reactdatagrid-community';
import '@inovua/reactdatagrid-community/index.css';

const columns = [
  { name: 'name', header: 'Name', minWidth: 50, defaultFlex: 2 },
  { name: 'age', header: 'Age', maxWidth: 1000, defaultFlex: 1 },
];

const gridStyle = { minHeight: 550 };

const dataSource = [
  { id: 1, name: 'John McQueen', age: 35 },
  { id: 2, name: 'Mary Stones', age: 25 },
  { id: 3, name: 'Robert Fil', age: 27 },
  { id: 4, name: 'Roger Robson', age: 81 },
  { id: 5, name: 'Billary Konwik', age: 18 },
  { id: 6, name: 'Bob Martin', age: 18 },
  { id: 7, name: 'Matthew Richardson', age: 54 },
  { id: 8, name: 'Ritchie Peterson', age: 54 },
  { id: 9, name: 'Bryan Martin', age: 40 },
  { id: 10, name: 'Mark Martin', age: 44 },
  { id: 11, name: 'Michelle Sebastian', age: 24 },
  { id: 12, name: 'Michelle Sullivan', age: 61 },
  { id: 13, name: 'Jordan Bike', age: 16 },
  { id: 14, name: 'Nelson Ford', age: 34 },
  { id: 15, name: 'Tim Cheap', age: 3 },
  { id: 16, name: 'Robert Carlson', age: 31 },
  { id: 17, name: 'Johny Perterson', age: 40 },
];

export default () => (
  <ReactDataGrid
    idProperty="id"
    columns={columns}
    dataSource={dataSource}
    style={gridStyle}
  />
);

Our documentation contains hundreds of running examples, so please make sure you check that out.

Client stories

It’s already been used by thousands of users in business-critical apps, so you can trust it from the get-go. Our clients are building their apps with the ReactDataGrid at the core of their products.

With the help of the ReactDataGrid, provided by Inovua Trading S.R.L., we have been able to offer our customers the perfect support for state-of-the-art data management in our fleet management solution WEBFLEET.

--Thomas Boehm, Senior Engineering Manager at Webfleet Solutions, a Bridgestone Company

Enterprise-grade Datagrid component with outstanding feature coverage and second-to-none performance made it a straightforward decision to include it in our cloud-centric on-demand solutions.

--Yuri Genin, Lead UI Architect at PROS

License

Community Edition - MIT License