Skip to content

Commit

Permalink
[EuiDataGrid] Automatic column schema detection (#2351)
Browse files Browse the repository at this point in the history
* Automatically detect data schema for in-memory datagrid

* Merge in described schema for field formatting

* Better column type detection

* Tests for euidatagrid schema / column type

* refactor datagrid schema code, add datetime type detection

* some comments

* Allow extra type detectors for EuiDataGrid

* cleanup of docs and type formatting

* Fix datagrid unit test

* Update currency detector

* Allow EuiDataGrid's inMemory prop to be {true}

* Added ability to provide extra props for the containing cell div

* Added test for cell props
  • Loading branch information
chandlerprall authored Sep 23, 2019
1 parent 2142dfc commit e921022
Show file tree
Hide file tree
Showing 16 changed files with 786 additions and 416 deletions.
21 changes: 18 additions & 3 deletions src-docs/src/views/datagrid/datagrid.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component, Fragment } from 'react';
import React, { Component, Fragment, useEffect } from 'react';
import { fake } from 'faker';

import {
Expand Down Expand Up @@ -124,10 +124,25 @@ export default class DataGridContainer extends Component {

return (
<EuiDataGrid
aria-label="Top EUI contributors"
aria-label="Data grid demo"
columns={columns}
rowCount={data.length}
renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
renderCellValue={({ rowIndex, columnId, setCellProps }) => {
useEffect(() => {
if (columnId === 'amount') {
const numeric = parseFloat(
data[rowIndex][columnId].match(/\d+\.\d+/)[0],
10
);
setCellProps({
style: {
backgroundColor: `rgba(0, ${(numeric / 1000) * 255}, 0, 0.2)`,
},
});
}
}, [rowIndex, columnId, setCellProps]);
return data[rowIndex][columnId];
}}
sorting={{ columns: sortingColumns, onSort: this.setSorting }}
pagination={{
...pagination,
Expand Down
24 changes: 23 additions & 1 deletion src-docs/src/views/datagrid/datagrid_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,13 @@ import DataGridStyling from './styling';
const dataGridStylingSource = require('!!raw-loader!./styling');
const dataGridStylingHtml = renderToHtml(DataGridStyling);

import DataGridSchema from './schema';
const dataGridSchemaSource = require('!!raw-loader!./schema');
const dataGridSchemaHtml = renderToHtml(DataGridSchema);

import InMemoryDataGrid from './in_memory';
const inMemoryDataGridSource = require('!!raw-loader!./in_memory');
const inMemoryDataGridHtml = renderToHtml(DataGridStyling);
const inMemoryDataGridHtml = renderToHtml(InMemoryDataGrid);

export const DataGridExample = {
title: 'Data grid',
Expand Down Expand Up @@ -88,6 +92,24 @@ export const DataGridExample = {
demo: <DataGridStyling />,
props: { EuiDataGrid },
},
{
source: [
{
type: GuideSectionTypes.JS,
code: dataGridSchemaSource,
},
{
type: GuideSectionTypes.HTML,
code: dataGridSchemaHtml,
},
],
title: 'Schema',
text: (
<p>Column type information can be included on the column definition.</p>
),
components: { DataGridSchema },
demo: <DataGridSchema />,
},
{
source: [
{
Expand Down
Loading

0 comments on commit e921022

Please sign in to comment.