@devexpress/dx-react-grid
Advanced tools
DevExtreme React Grid is a component that displays table data from a local or remote source. It supports paging, sorting, filtering, grouping and other data shaping options, row selection, and data editing. Support for controlled and uncontrolled state modes allows you to use the Grid in a regular or Redux-based application. The DevExtreme Grid component has a composable and extendable plugin-based architecture and is provided with Twitter Bootstrap and Material UI rendering and theming out of the box.
Install the dx-react-grid package and its dependencies using the following command:
npm i --save @devexpress/dx-react-core @devexpress/dx-react-grid
This package does not contain visual components. In the examples below, visual components are rendered using the Bootstrap 3 package. However, you can use any of the following:
Material UI
npm i --save @devexpress/dx-react-grid-material-ui
Make sure that Material UI dependencies are installed and properly configured. Check the Material UI's Getting Started article for configuration details.
Bootstrap 4
npm i --save @devexpress/dx-react-grid-bootstrap4
Make sure that reactstrap dependencies are installed and properly configured. Check the reactstrap's Getting Started article for configuration details.
Bootstrap 3
npm i --save @devexpress/dx-react-grid-bootstrap3
Make sure that React-Bootstrap dependencies are installed and properly configured. Check the React-Bootstrap's Getting Started article for configuration details.
React Grid uses the latest web platform standards. Thus, it cannot support older browsers like IE11 and Android 4. Use the ES2015 (ES6) polyfill to support these browsers. We recommend BABEL Polyfill, but you can use an alternative.
The Grid renders nothing by default. The root Grid component's nested plugin components implement its functionality, and it is necessary to specify at least one plugin that visualizes the grid's data.
Use the Table plugin to display the data as a simple table:
import {
Grid, Table, TableHeaderRow
} from '@devexpress/dx-react-grid-bootstrap3'/* or '@devexpress/dx-react-grid-material-ui' */;
const App = () => (
<Grid
rows={[
{ id: 0, product: 'DevExtreme', owner: 'DevExpress' },
{ id: 1, product: 'DevExtreme Reactive', owner: 'DevExpress' },
]}
columns={[
{ name: 'id', title: 'ID' },
{ name: 'product', title: 'Product' },
{ name: 'owner', title: 'Owner' },
]}>
<Table />
<TableHeaderRow />
</Grid>
);
Follow the links below to try out the React Grid:
1.1.0 (2018-03-15)
<a name="1.1.0-beta.3"></a>
FAQs
Composable plugin-based data grid component for React
The npm package @devexpress/dx-react-grid receives a total of 24,585 weekly downloads. As such, @devexpress/dx-react-grid popularity was classified as popular.
We found that @devexpress/dx-react-grid demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.