Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@devexpress/dx-react-grid
Advanced tools
@devexpress/dx-react-grid - npm Package Compare versions
Comparing version 1.2.0-beta.2 to 1.2.0-beta.3
| { | ||
| "name": "@devexpress/dx-react-grid", | ||
| "version": "1.2.0-beta.2", | ||
| "version": "1.2.0-beta.3", | ||
| "description": "Composable plugin-based data grid component for React", | ||
@@ -45,6 +45,6 @@ "author": { | ||
| "devDependencies": { | ||
| "@devexpress/dx-core": "1.2.0-beta.2", | ||
| "@devexpress/dx-react-core": "1.2.0-beta.2", | ||
| "@devexpress/dx-testing": "1.2.0-beta.2", | ||
| "babel-core": "^6.26.0", | ||
| "@devexpress/dx-core": "1.2.0-beta.3", | ||
| "@devexpress/dx-react-core": "1.2.0-beta.3", | ||
| "@devexpress/dx-testing": "1.2.0-beta.3", | ||
| "babel-core": "^6.26.3", | ||
| "babel-jest": "^22.4.3", | ||
@@ -56,3 +56,3 @@ "babel-plugin-external-helpers": "^6.22.0", | ||
| "babel-preset-react": "^6.24.1", | ||
| "core-js": "^2.5.4", | ||
| "core-js": "^2.5.5", | ||
| "enzyme": "^3.3.0", | ||
@@ -65,4 +65,4 @@ "enzyme-adapter-react-16": "^1.1.1", | ||
| "eslint-plugin-filenames": "^1.2.0", | ||
| "eslint-plugin-import": "^2.10.0", | ||
| "eslint-plugin-jest": "^21.15.0", | ||
| "eslint-plugin-import": "^2.11.0", | ||
| "eslint-plugin-jest": "^21.15.1", | ||
| "eslint-plugin-jsx-a11y": "^6.0.3", | ||
@@ -80,8 +80,8 @@ "eslint-plugin-react": "^7.7.0", | ||
| "dependencies": { | ||
| "@devexpress/dx-grid-core": "1.2.0-beta.2", | ||
| "@devexpress/dx-grid-core": "1.2.0-beta.3", | ||
| "prop-types": "^15.6.1" | ||
| }, | ||
| "peerDependencies": { | ||
| "@devexpress/dx-core": "1.2.0-beta.2", | ||
| "@devexpress/dx-react-core": "1.2.0-beta.2", | ||
| "@devexpress/dx-core": "1.2.0-beta.3", | ||
| "@devexpress/dx-react-core": "1.2.0-beta.3", | ||
| "react": "^16.2.0", | ||
@@ -88,0 +88,0 @@ "react-dom": "^16.2.0" |
| # DevExtreme React Grid | ||
| ## Overview | ||
| DevExtreme React Grid is a component that displays table data from a local or remote source. | ||
| 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. | ||
| [Website](https://devexpress.github.io/devextreme-reactive/react/grid/) | ||
| | | ||
| [Demos](https://devexpress.github.io/devextreme-reactive/react/grid/demos/) | ||
| | | ||
| [Docs](https://devexpress.github.io/devextreme-reactive/react/grid/docs/) | ||
| ## Getting Started | ||
| ### Installation | ||
| 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](https://material-ui-1dab0.firebaseapp.com/) dependencies are installed and properly configured. Check the Material UI's [Getting Started](https://material-ui-1dab0.firebaseapp.com/getting-started/installation) article for configuration details. | ||
| - Bootstrap 4 | ||
| ``` | ||
| npm i --save @devexpress/dx-react-grid-bootstrap4 | ||
| ``` | ||
| Make sure that [reactstrap](https://reactstrap.github.io/) dependencies are installed and properly configured. Check the reactstrap's [Getting Started](https://reactstrap.github.io/) article for configuration details. | ||
| - Bootstrap 3 | ||
| ``` | ||
| npm i --save @devexpress/dx-react-grid-bootstrap3 | ||
| ``` | ||
| Make sure that [React-Bootstrap](https://react-bootstrap.github.io) dependencies are installed and properly configured. Check the React-Bootstrap's [Getting Started](https://react-bootstrap.github.io/getting-started/introduction) article for configuration details. | ||
| ### Polyfills | ||
| 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](https://babeljs.io/docs/usage/polyfill/), but you can use an alternative. | ||
| ### Using Grid component | ||
| 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: | ||
| ```jsx | ||
| 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> | ||
| ); | ||
| ``` | ||
| ### Try Out The React Grid | ||
| Follow the links below to try out the React Grid: | ||
| - [CodeSandbox for Material UI](https://codesandbox.io/s/13qvz1qqzl) | ||
| - [CodeSandbox for Bootstrap4](https://codesandbox.io/s/rymyjlonpq) | ||
| - [CodeSandbox for Bootstrap3](https://codesandbox.io/s/7o46mkowx) | ||
| ## Documentation | ||
| [Guides](https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/) | ||
| [API Reference](https://devexpress.github.io/devextreme-reactive/react/grid/docs/reference/) | ||
| ## License | ||
| [DevExtreme licensing](https://js.devexpress.com/licensing/). |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.04%
10948
Worsened metrics
- Total package byte prevSize
- decreased by-0.26%
903132
- Number of lines in readme file
- decreased by-84.62%
14
Dependency changes
+ Added@devexpress/dx-core@1.2.0-beta.3(transitive)
+ Added@devexpress/dx-grid-core@1.2.0-beta.3(transitive)
+ Added@devexpress/dx-react-core@1.2.0-beta.3(transitive)
- Removed@devexpress/dx-core@1.2.0-beta.2(transitive)
- Removed@devexpress/dx-grid-core@1.2.0-beta.2(transitive)
- Removed@devexpress/dx-react-core@1.2.0-beta.2(transitive)