diff --git a/src-docs/src/views/datagrid/datagrid_height_options_example.js b/src-docs/src/views/datagrid/datagrid_height_options_example.js index 4799ab28685f..ab27acb5a6ba 100644 --- a/src-docs/src/views/datagrid/datagrid_height_options_example.js +++ b/src-docs/src/views/datagrid/datagrid_height_options_example.js @@ -12,11 +12,41 @@ import { import { EuiDataGridRowHeightsOptions } from '!!prop-loader!../../../../src/components/datagrid/data_grid_types'; +import DataGridRowLineHeight from './row_line_height'; +const dataGridRowLineHeightSource = require('!!raw-loader!./row_height_auto'); 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 lineHeightSnippet = `rowHeightsOptions = { + defaultHeight: { + lineCount: 3 // default every row to 3 lines of text + }, + lineHeight: '2em', // default every cell line-height to 2em +}`; + +const lineHeightFullSnippet = `const rowHeightsOptions = useMemo( + () => ({ + defaultHeight: { + lineCount: 3, + }, + lineHeight: '2em'; + }), + [] +); + + +`; + const rowHeightsSnippet = `rowHeightsOptions = { defaultHeight: 140, // default every row to 140px rowHeights: { @@ -110,24 +140,44 @@ export const DataGridRowHeightOptionsExample = { By default, all rows get a height of 34 pixels, 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{' '} - rowHeightsOptions prop. This object accepts two + rowHeightsOptions prop. This object accepts three properties:

-

- Each of these can be configured with an exact pixel height, a line - count, or "auto" to fit all of the - content. See the examples below for more details. -

@@ -145,19 +195,55 @@ export const DataGridRowHeightOptionsExample = { source: [ { type: GuideSectionTypes.JS, - code: dataGridRowHeightOptionsSource, + code: dataGridRowLineHeightSource, }, ], - title: 'Fixed heights for rows', + title: 'Setting a default height and line height for rows', text: (

You can change the default height for all rows by passing a line count or pixel value to the defaultHeight{' '} - property. + property, and customize the line height of all cells with the{' '} + lineHeight property.

+ + {lineHeightSnippet} + + +

+ NOTE: If you wrap your cell content with CSS that overrides/sets + line-height (e.g. in an EuiText), your row + heights will not be calculated correctly! Make sure to match the + passed lineHeight property to the actual cell + content line height. +

+ + + ), + components: { DataGridRowLineHeight }, + props: { + EuiDataGrid, + EuiDataGridRowHeightsOptions, + }, + demo: , + snippet: lineHeightFullSnippet, + }, + { + source: [ + { + type: GuideSectionTypes.JS, + code: dataGridRowHeightOptionsSource, + }, + ], + title: 'Overriding specific row heights', + text: ( +

- You can also override the height of a specific row by passing a + You can override the default height of a specific row by passing a rowHeights object associating the row's index with a specific height configuration.

diff --git a/src-docs/src/views/datagrid/row_line_height.tsx b/src-docs/src/views/datagrid/row_line_height.tsx new file mode 100644 index 000000000000..d79b9b863261 --- /dev/null +++ b/src-docs/src/views/datagrid/row_line_height.tsx @@ -0,0 +1,182 @@ +import React, { + useCallback, + useState, + createContext, + useContext, + useMemo, + ReactNode, +} from 'react'; +// @ts-ignore not configured to import json +import githubData from './row_auto_height_data.json'; + +import { formatDate } from '../../../../src/services'; + +import { + EuiDataGrid, + EuiDataGridProps, +} from '../../../../src/components/datagrid'; + +interface DataShape { + html_url: string; + title: string; + user: { + login: string; + avatar_url: string; + }; + labels: Array<{ + name: string; + color: string; + }>; + comments: number; + created_at: string; + body?: string; +} + +// convert strings to Date objects +for (let i = 0; i < githubData.length; i++) { + githubData[i].created_at = new Date(githubData[i].created_at); +} + +type DataContextShape = + | undefined + | { + data: DataShape[]; + }; +const DataContext = createContext(undefined); + +const columns = [ + { + id: 'index', + displayAsText: 'Index', + isExpandable: false, + initialWidth: 80, + }, + { + id: 'issue', + displayAsText: 'Issue', + isExpandable: false, + }, + { + id: 'body', + displayAsText: 'Description', + }, +]; + +// it is expensive to compute 10000 rows of fake data +// instead of loading up front, generate entries on the fly +const raw_data: DataShape[] = githubData; + +const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({ + rowIndex, + columnId, + isDetails, +}) => { + const { data } = useContext(DataContext)!; + + const item = data[rowIndex]; + let content: ReactNode = ''; + + if (columnId === 'index') { + content = <>{rowIndex}; + } else if (columnId === 'issue') { + content = ( + <> + {item.title} +
+ Opened by {item.user.login} on {formatDate(item.created_at, 'dobLong')} +
+ {item.comments} comment{item.comments !== 1 ? 's' : ''} + + ); + } else if (columnId === 'body') { + if (isDetails) { + // expanded in a popover + content = item.body; + } else { + // a full issue description is a *lot* to shove into a cell + content = (item.body ?? '').slice(0, 300); + } + } + + return content; +}; + +export default () => { + // ** Pagination config + const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 }); + + // ** Sorting config + const [sortingColumns, setSortingColumns] = useState([]); + const onSort = useCallback( + (sortingColumns) => { + setSortingColumns(sortingColumns); + }, + [setSortingColumns] + ); + + const onChangeItemsPerPage = useCallback( + (pageSize) => + setPagination((pagination) => ({ + ...pagination, + pageSize, + pageIndex: 0, + })), + [setPagination] + ); + + const onChangePage = useCallback( + (pageIndex) => + setPagination((pagination) => ({ ...pagination, pageIndex })), + [setPagination] + ); + + // Column visibility + const [visibleColumns, setVisibleColumns] = useState(() => + columns.map(({ id }) => id) + ); // initialize to the full set of columns + + // matches the snippet example + const rowHeightsOptions = useMemo( + () => ({ + defaultHeight: { + lineCount: 3, + }, + lineHeight: '2em', + }), + [] + ); + + const dataContext = useMemo( + () => ({ + data: raw_data, + }), + [] + ); + + return ( + + + + ); +};