-
Notifications
You must be signed in to change notification settings - Fork 841
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[EuiDataGrid] Auto-fit rows to content (#4958)
* Add auto height possibility to row * Fix eslint * Fix some problems with hiding column * Fix example * Fix example * fix calculation height so that work for images and fix problems with font * Fix tests * fix eslint * fix some problems * use resizeObserver instead of handling height in didMount method * Fix some remarks * fix some problems with shrinking * Fix scrolling * Some performance improvements * use callback ref for setting grid in rowHeigthsUtils instead of useEffect * Add new properties * add changelog * Fix lint * convert autoheight example to TS * With data * examples cleanup * Some fixes * Add virtualizationOptions * Improve performance * Fix useEffect * Fix tests * Fix lint * Remove unnecessary changes * Remove unnecessary changes * Fix tests * Cleaned up lastUpdatedRow a bit * example cleanup * Fix lint * DRY out mock rowHeightUtils - instead of repeating various objs/fns across multiple files - change static fns to jest mocks, in case we need to override their values later on a per-test basis * [EuiGridCell] Refactor + write test for new componentDidUpdate logic - Pull into separate class fn for readability, since the logic isn't using prevProps but is just running on evry update - destructure for readability - declare vars for if condition readability * [EuiGridCell] PR feedback: destructure props for readability * fix nit's * Making datagrid matching the top snippet and improving demo * Fixing comments line * Removing HTML code * New section title * Small logic optimization * Improving texts * Renaming files and improving "fixed heights rows" demo * Better text :D * Text again * Correctly identify the row heights page in the a11y test skipping * Small copy cleanup * small example cleanup * Fix calculating defaultHeight after using density * Update mock * make visibility property depends on calculating cell height * make lint happy * Revert "make visibility property depends on calculating cell height" This reverts commit d1d4305. * snapshot * Updating example to make density work * Better `gridStyle` font size explanation Co-authored-by: Chandler Prall <chandler.prall@gmail.com> Co-authored-by: Constance Chen <constance.chen.3@gmail.com> Co-authored-by: miukimiu <elizabet.oliveira@elastic.co> Co-authored-by: Constance <constancecchen@users.noreply.github.com>
- Loading branch information
5 people
authored
Sep 21, 2021
1 parent
841ed6f
commit 8f8d0b5
Showing
19 changed files
with
14,128 additions
and
291 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
205 changes: 168 additions & 37 deletions
205
src-docs/src/views/datagrid/datagrid_height_options_example.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,80 +1,211 @@ | ||
| import React, { Fragment } from 'react'; | ||
|
|
||
| import { renderToHtml } from '../../services'; | ||
| import { GuideSectionTypes } from '../../components'; | ||
| import { | ||
| EuiDataGrid, | ||
| EuiCallOut, | ||
| EuiCode, | ||
| EuiCodeBlock, | ||
| EuiSpacer, | ||
| EuiText, | ||
| } from '../../../../src/components'; | ||
|
|
||
| import DataGridRowHeightOptions from './row_height_options'; | ||
| const dataGridRowHeightOptionsSource = require('!!raw-loader!./row_height_options'); | ||
| const dataGridRowHeightOptionsHtml = renderToHtml(DataGridRowHeightOptions); | ||
| import { EuiDataGridRowHeightsOptions } from '!!prop-loader!../../../../src/components/datagrid/data_grid_types'; | ||
|
|
||
| import DataGridRowHeightOptions from './row_height_fixed'; | ||
| const dataGridRowHeightOptionsSource = require('!!raw-loader!./row_height_fixed'); | ||
| import DataGridRowAutoHeight from './row_height_auto'; | ||
| const dataGridRowAutoHeightSource = require('!!raw-loader!./row_height_auto'); | ||
|
|
||
| const rowHeightsSnippet = `rowHeightsOptions = { | ||
| defaultHeight: { | ||
| lineCount: 2, // default every row to 2 lines of text. Also we can provide height in pixels | ||
| }, | ||
| defaultHeight: 140, // default every row to 140px | ||
| rowHeights: { | ||
| 1: { | ||
| lineCount: 5, // for row which have index 1 we allow to show 5 lines after that we truncate | ||
| }, | ||
| 4: 140, // for row which have index 4 we set 140 pixel | ||
| 4: 200, // for row which have index 4 we set 140 pixel | ||
| 5: 80, | ||
| }, | ||
| }`; | ||
|
|
||
| const rowHeightsFullSnippet = `const rowHeightsOptions = useMemo( | ||
| () => ({ | ||
| defaultHeight: { | ||
| lineCount: 2, | ||
| }), | ||
| [] | ||
| ); | ||
| <EuiDataGrid | ||
| aria-label="Data grid with fixed height for rows" | ||
| columns={columns} | ||
| columnVisibility={{ visibleColumns, setVisibleColumns }} | ||
| rowCount={rowCount} | ||
| height={400} | ||
| renderCellValue={renderCellValue} | ||
| inMemory={{ level: 'sorting' }} | ||
| sorting={{ columns: sortingColumns, onSort }} | ||
| rowHeightsOptions={rowHeightsOptions} | ||
| pagination={{ | ||
| ...pagination, | ||
| pageSizeOptions: [50, 250, 1000], | ||
| onChangeItemsPerPage: onChangeItemsPerPage, | ||
| onChangePage: onChangePage, | ||
| }} | ||
| /> | ||
| `; | ||
|
|
||
| const autoRowHeightsSnippet = `// the demo below matches this snippet | ||
| rowHeightsOptions = { | ||
| defaultHeight: 'auto', // all rows will automatically adjust the height except rows defined in 'rowHeights' | ||
| rowHeights: { | ||
| 1: { | ||
| lineCount: 5, // row at index 1 will show 5 lines | ||
| }, | ||
| 4: 140, // row at index 4 will adjust the height to 140px | ||
| }, | ||
| } | ||
| // you can also automatically adjust the height for a specific row | ||
| rowHeightsOptions = { | ||
| rowHeights: { | ||
| 1: 'auto', // row at index 1 will automatically adjust the height | ||
| 4: 140, // row at index 4 will adjust the height to 140px | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| const autoRowHeightsFullSnippet = `const rowHeightsOptions = useMemo( | ||
| () => ({ | ||
| defaultHeight: 'auto' | ||
| }), | ||
| [] | ||
| ); | ||
| <EuiDataGrid | ||
| aria-label="Data grid with auto height for rows" | ||
| columns={columns} | ||
| columnVisibility={{ visibleColumns, setVisibleColumns }} | ||
| rowCount={rowCount} | ||
| height={400} | ||
| renderCellValue={renderCellValue} | ||
| inMemory={{ level: 'sorting' }} | ||
| sorting={{ columns: sortingColumns, onSort }} | ||
| rowHeightsOptions={rowHeightsOptions} | ||
| pagination={{ | ||
| ...pagination, | ||
| pageSizeOptions: [50, 250, 1000], | ||
| onChangeItemsPerPage: onChangeItemsPerPage, | ||
| onChangePage: onChangePage, | ||
| }} | ||
| /> | ||
| `; | ||
|
|
||
| export const DataGridRowHeightOptionsExample = { | ||
| title: 'Data grid row height options', | ||
| title: 'Data grid row heights options', | ||
| intro: ( | ||
| <Fragment> | ||
| <EuiText> | ||
| <p> | ||
| By default, all rows get a height of <strong>34 pixels</strong>, but | ||
| there are scenarios where you might want to adjust the height to fit | ||
| more content. To do that, you can pass an object to the{' '} | ||
| <EuiCode>rowHeightsOptions</EuiCode> prop. This object accepts two | ||
| properties: | ||
| </p> | ||
| <ul> | ||
| <li> | ||
| <EuiCode>defaultHeight</EuiCode> - defines the default size for all | ||
| rows | ||
| </li> | ||
| <li> | ||
| <EuiCode>rowHeights</EuiCode> - overrides the height for a specific | ||
| row | ||
| </li> | ||
| </ul> | ||
| <p> | ||
| Each of these can be configured with an exact pixel height, a line | ||
| count, or <EuiCode>"auto"</EuiCode> to fit all of the | ||
| content. See the examples below for more details. | ||
| </p> | ||
| </EuiText> | ||
| <EuiSpacer /> | ||
| <EuiCallOut color="warning" title="Rows have minimum height requirements"> | ||
| <p> | ||
| Rows must be at least <strong>34 pixels</strong> tall so they can | ||
| render at least one line of text. If you provide a smaller height the | ||
| row will default to <strong>34 pixels</strong>. | ||
| </p> | ||
| </EuiCallOut> | ||
| <EuiSpacer /> | ||
| </Fragment> | ||
| ), | ||
| sections: [ | ||
| { | ||
| source: [ | ||
| { | ||
| type: GuideSectionTypes.JS, | ||
| code: dataGridRowHeightOptionsSource, | ||
| }, | ||
| { | ||
| type: GuideSectionTypes.HTML, | ||
| code: dataGridRowHeightOptionsHtml, | ||
| }, | ||
| ], | ||
| title: 'Fixed heights for rows', | ||
| text: ( | ||
| <Fragment> | ||
| <p> | ||
| Row height options can be passed down to the grid through the{' '} | ||
| <EuiCode>rowHeightsOptions</EuiCode> prop. It accepts an object | ||
| configuring the default height and/or specific row heights: | ||
| You can change the default height for all rows by passing a line | ||
| count or pixel value to the <EuiCode>defaultHeight</EuiCode>{' '} | ||
| property. | ||
| </p> | ||
| <p> | ||
| You can also override the height of a specific row by passing a | ||
| <EuiCode>rowHeights</EuiCode> object associating the row's | ||
| index with a specific height configuration. | ||
| </p> | ||
| <ul> | ||
| <li> | ||
| <EuiCode>defaultHeight</EuiCode> - defines the default size for | ||
| all rows | ||
| </li> | ||
| <li> | ||
| <EuiCode>rowHeights</EuiCode> - overrides the height for a | ||
| specific row | ||
| </li> | ||
| </ul> | ||
| <EuiCallOut | ||
| color="warning" | ||
| title="Rows have minimum height requirements" | ||
| > | ||
| <p> | ||
| Rows must be at least <strong>34 pixels</strong> tall so they can | ||
| render at least one line of text. If you provide a smaller height | ||
| the row will default to 34 pixels. | ||
| </p> | ||
| </EuiCallOut> | ||
| <EuiSpacer /> | ||
| <EuiCodeBlock language="javascript" paddingSize="s" isCopyable> | ||
| {rowHeightsSnippet} | ||
| </EuiCodeBlock> | ||
| </Fragment> | ||
| ), | ||
| components: { DataGridRowHeightOptions }, | ||
| props: { | ||
| EuiDataGrid, | ||
| EuiDataGridRowHeightsOptions, | ||
| }, | ||
| demo: <DataGridRowHeightOptions />, | ||
| snippet: rowHeightsFullSnippet, | ||
| }, | ||
| { | ||
| source: [ | ||
| { | ||
| type: GuideSectionTypes.JS, | ||
| code: dataGridRowAutoHeightSource, | ||
| }, | ||
| ], | ||
| title: 'Auto heights for rows', | ||
| text: ( | ||
| <Fragment> | ||
| <p> | ||
| To enable automatically fitting rows to their content you can set{' '} | ||
| <EuiCode>defaultHeight="auto"</EuiCode>. This ensures | ||
| every row automatically adjusts its height to fit the contents. | ||
| </p> | ||
| <p> | ||
| You can also override the height of a specific row by passing a | ||
| <EuiCode>rowHeights</EuiCode> object associating the row's | ||
| index with an <EuiCode>"auto"</EuiCode> value. | ||
| </p> | ||
| <EuiCodeBlock language="javascript" paddingSize="s" isCopyable> | ||
| {autoRowHeightsSnippet} | ||
| </EuiCodeBlock> | ||
| </Fragment> | ||
| ), | ||
| components: { DataGridRowAutoHeight }, | ||
| props: { | ||
| EuiDataGrid, | ||
| EuiDataGridRowHeightsOptions, | ||
| }, | ||
| demo: <DataGridRowAutoHeight />, | ||
| snippet: autoRowHeightsFullSnippet, | ||
| }, | ||
| ], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.