[Data Grid] - Styling built into data grid, full screen mode

.eslintrc.js

@@ -30,7 +30,8 @@ module.exports = {
  plugins: [
  "jsx-a11y",
  "prettier",
- "local"
+ "local",
+ "react-hooks"
  ],
  rules: {
  "prefer-template": "error",
@@ -64,6 +65,9 @@ module.exports = {
  "jsx-a11y/tabindex-no-positive": "error",
  "jsx-a11y/label-has-associated-control": "error",
 
+ // "react-hooks/rules-of-hooks": "error",
+ // "react-hooks/exhaustive-deps": "warn",
+
  "@typescript-eslint/array-type": ["error", "array-simple"],
  "@typescript-eslint/camelcase": "off",
  "@typescript-eslint/class-name-casing": "off",

package.json

@@ -127,6 +127,8 @@
  "eslint-plugin-prefer-object-spread": "^1.2.1",
  "eslint-plugin-prettier": "^3.1.0",
  "eslint-plugin-react": "^7.13.0",
+ "eslint-plugin-react-hooks": "^2.0.1",
+ "faker": "^4.1.0",
  "file-loader": "^1.1.11",
  "findup": "^0.1.5",
  "fork-ts-checker-webpack-plugin": "^0.4.4",

src-docs/src/routes.js

@@ -392,7 +392,7 @@ const allRoutes = navigation.reduce((accummulatedRoutes, section) => {
 }, []);
 
 export default {
- history: useRouterHistory(createHashHistory)(),
+ history: useRouterHistory(createHashHistory)(), // eslint-disable-line react-hooks/rules-of-hooks
  navigation,
 
  getRouteForPath: path => {

src-docs/src/views/datagrid/container.js

@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import { fake } from 'faker';
+
+import { EuiDataGrid, EuiPanel, EuiLink } from '../../../../src/components/';
+
+const columns = [
+ {
+ id: 'name',
+ },
+ {
+ id: 'email',
+ },
+ {
+ id: 'city',
+ },
+ {
+ id: 'country',
+ },
+ {
+ id: 'account',
+ },
+];
+
+const data = [];
+
+for (let i = 1; i < 100; i++) {
+ data.push({
+ name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
+ email: fake('{{internet.email}}'),
+ city: (
+ <EuiLink href="http://google.com">{fake('{{address.city}}')}</EuiLink>
+ ),
+ country: fake('{{address.country}}'),
+ account: fake('{{finance.account}}'),
+ });
+}
+
+export default class DataGridContainer extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ pagination: {
+ pageIndex: 0,
+ pageSize: 50,
+ },
+ };
+ }
+
+ setPageIndex = pageIndex =>
+ this.setState(({ pagination }) => ({
+ pagination: { ...pagination, pageIndex },
+ }));
+
+ setPageSize = pageSize =>
+ this.setState(({ pagination }) => ({
+ pagination: { ...pagination, pageSize },
+ }));
+
+ render() {
+ const { pagination } = this.state;
+
+ return (
+ <EuiPanel style={{ width: 300 }}>
+ <div style={{ height: 300 }}>
+ <EuiDataGrid
+ aria-label="Top EUI contributors"
+ columns={columns}
+ rowCount={data.length}
+ gridStyle={{
+ border: 'horizontal',
+ header: 'underline',
+ }}
+ renderCellValue={({ rowIndex, columnId }) =>
+ data[rowIndex][columnId]
+ }
+ pagination={{
+ ...pagination,
+ pageSizeOptions: [5, 10, 25],
+ onChangeItemsPerPage: this.setPageSize,
+ onChangePage: this.setPageIndex,
+ }}
+ />
+ </div>
+ </EuiPanel>
+ );
+ }
+}