diff --git a/packages/components/src/datagrid/documentation/usage-guidelines/usage.mdx b/packages/components/src/datagrid/documentation/usage-guidelines/usage.mdx index 52ff973145..3b32b739c9 100644 --- a/packages/components/src/datagrid/documentation/usage-guidelines/usage.mdx +++ b/packages/components/src/datagrid/documentation/usage-guidelines/usage.mdx @@ -135,6 +135,68 @@ export const datagridFormatter = () => { ``` + +### Overflowing elements + +You can add a `position: absolute` styling if you want to allow the formatted elements in your row to overflow. + +export const overflowingElementsFormatter = () => { + setTimeout(() => { + const datagrid = document.getElementById('overflowingElements'); + if (!datagrid) { + return; + } + datagrid.columns = [ + { title: "Without overflow", field: "nooverflow", formatter: (value) => { + return '

I can't overflow

Action 1

Action 2

Action 3

' + } + }, + { title: "With overflow", field: "overflow", formatter: (value) => { + return '

I can overflow

Action 1

Action 2

Action 3

' + } + }, + ]; + datagrid.rows = [ + { nooverflow: "", overflow: ""}, + { nooverflow: "", overflow: ""}, + { nooverflow: "", overflow: ""}, + ]; + datagrid.height = 150; + }, 1000); +}; + + + + +<>{ overflowingElementsFormatter() } + +```html + + + +``` + ### Empty rows Empty state datagrid.addEventListener('odsRowSelectedChange', (data) => console.log('odsRowSelectedChange', data)) datagrid.columns = [ - { title: "First name", field: "firstname", overflow: true, formatter: (cellValue, rowValue) => { + { title: "First name", field: "firstname", formatter: (cellValue, rowValue) => { return `

Action menu @@ -90,7 +90,7 @@

Empty state

} }, { title: "Test", field: "test", formatter: (cellValue, rowValue) => { - return ` + return `

Group/Text 1

pFad - Phonifier reborn

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Empty state

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.