React Digital Grid
This is a React DataGrid / DataTable component with features like:
- flexible formatting - Easily format columns with built-in classes: bold, italic, left, right, etc.. or totaly custom using your own written renderer functions.
- skins - 3 skins available: default, classic and bootstrap. You can also write your own skin, it's all about writing your own css file.
- pagination - Specify the total number of records, the page size and current page and paginator will automatically be rendered with links and actions for each page.
- sorting - Just specify if a column is
sortable
and automatically you will be able to click on it (with proper UI) and have proper events attached. - expandable content - You want to have a
show more...
or[+] details
feature on your rows? This is built-in and supports any kind of content, even another grid (sub-grid). - selection - If set, you are able to select one or multiple rows. You can also use
Shift
orCtrl
to multi-select. - events - You can specify what happens when you click on any of the cells in the grid. All data is available in the event parameters.
Installing
npm install --save react-digital-grid
Basic usage
import React from 'react';
import { Grid, Column } from 'react-digital-grid';
const Example = () => {
// load your data here: data
return (
<Grid
data={data}
>
<Column header='Id' className='left' field='guid' />
<Column header='Name' className='bold' field='name' />
<Column header='Company' className='bold' field='company' />
<Column
header='Email'
field='email'
renderer={item => {
return <a href={`mailto:${item.email}`}>{item.email}</a>;
}}
/>
</Grid>
);
};
Demos available here
A lot of examples available at: https://miscalencu.github.io/react-digital-grid/
Parameters
Parameter | Description |
---|---|
Basic | |
loading |
Sets if the grid should display a loading indicator. Defaults to 'false'. |
data |
The data that the grid should display. |
keyField |
The field name of the data elements that represents a unique key. |
dataCount |
The total records of the grid. This is not the count of the 'data' array, but total records for all pages. Used by the paginator to calculate total pages. |
pageNr |
Curtent page to display. Used by the paginator render. |
pageSize |
Current number of items to display on a page. Used by the paginator render. |
orderBy |
Initial 'Order By' field. |
orderDir |
Initial 'Order Dir' field. |
onStateChange |
Callback method called when the state of the grid (page, order by, order dir, etc...) is changed. Parameterd: (pageSize, pageNr, orderBy, orderDir). |
Formatting | |
skin |
Skin of the grid. Can be: 'default', 'classic', 'bootstrap' or 'none'. Defalts to 'default'. |
emptyText |
Text to be displayed when there is no data to available. Defaults to 'No data available' |
footerText |
Text to be displayed in the bottom of the grid. Defaults to '' (empty). |
className |
Additional className of the grid table. Defaults to '' (empty). |
classNamesRenderer |
Method to compute additional className for each row. Parameters: see row events parameters. |
onCellClick |
Callback method to be called (if set) when clicking a column value. |
emptyPlaceholder |
Text to be displayed in each grid cell if the content is empty. |
Selection | |
isSelectable |
Sets if the grid is selectable. It true, rows can be (multi)selected. Defaults for 'false'. |
showSelectionInfo |
Sets if the selection info is displayed in the footer of the grid. Defaults for 'false'. |
onSelectionChange |
Callback method called when the selection of the rows changed. Parameters: (selectedKeys, selectedItems, selectedLast) |
Expandable | |
isExpandable |
Sets if the grid is expandable. If 'true' will display in the first column a [+] sign that expands the current row. Defaults to 'false'. |
expandedRowContent |
Method used to generate the content of an expanded column. Parameters: (item) |
To be implemented
- frozen rows / first row.
- frozen columns / first column.
- improve plugins so you can extend the grid functionalities with your own.
Info
Data in the examples was generated with https://www.json-generator.com/