Find Famfamfam Flags Examples and Templates
Use this online famfamfam-flags playground to view and fork famfamfam-flags example apps and templates on CodeSandbox. Click any example below to run it instantly or find templates that can be used as a pre-built solution!
Master-Detail View - DevExtreme Data Grid (forked)The Master-Detail View allows users to expand a row ('master') and display the related content ('details') in the expanded section. To configure this feature, set the the masterDetail object's enabled property to true and use a template to specify detail section content. In this demo, the detail section displays another DataGrid.
Master-Detail View - DevExtreme Data Grid (forked)The Master-Detail View allows users to expand a row ('master') and display the related content ('details') in the expanded section. To configure this feature, set the the masterDetail object's enabled property to true and use a template to specify detail section content. In this demo, the detail section displays another DataGrid.
Virtual Scrolling - DevExtreme Scheduler (forked)With virtual scrolling, you can improve the overall performance of your application and reduce load times when our Scheduler component is bound to a large data set. When virtual scrolling is enabled, our Scheduler only renders visible appointments. When an appointment leaves the viewport, the Scheduler removes it from the DOM. The data set in this demo contains 100 groups with 9 appointments each.
To enable virtual scrolling mode, set the scrolling.mode property to "virtual".
Virtual scrolling support is available in the following Scheduler views: "day", "week", and "workWeek".
Column Chooser (forked)To change column visibility at runtime, set the columnChooser.enabled property to true. To make certain that a given column(s) always stay visible, set the columns[].allowHiding property to false.
To display the column chooser, click the appropriate toolbar button above the DataGrid. You can specify the column chooser's position via the columnChooser.position property. The manner in which users can display/hide columns depends on columnChooser.mode:
"dragAndDrop"
Users can drag and drop column headers to and from the column chooser.
"select"
Users can select and deselect check boxes with column names.
In "select" mode, you can choose whether parent element selection affects child/nested elements. Use the selection.recursive property for this purpose.
If the column chooser contains multiple hidden columns, you can enable the DevExtreme Grid’s column search UI. Assign true to the search.enabled property for this purpose.
In this demo, use the check boxes below the DataGrid to toggle search and selection features.
To hide a column in code, set the columns[].visible property to false.
Master-Detail View - DevExtreme Data Grid (forked)The Master-Detail View allows users to expand a row ('master') and display the related content ('details') in the expanded section. To configure this feature, set the the masterDetail object's enabled property to true and use a template to specify detail section content. In this demo, the detail section displays another DataGrid.
