Grid as Multi Column List
Usually the Grid displays tabular data in multiple columns with header and footer. The IntegralUI Grid component can hide its column header, footer and grid lines, and by using templates you can add custom HTML elements so that its appearance and behavior will be similar to a multi-column list. In this article, we will show you how to do that with sample code in vanilla JavaScript, Angular, React and Vue.
The sample code below is available in each JavaScript framework: Angular, React and Vue, which explains how to create a grid that appears as a list with data shown in multiple columns without header and footer.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
On first look, you cannot tell whether the above control is a Grid or a List. By use of custom CSS and templates, the Grid appears as a formatted list in multiple columns. In this example, the demo shows a list of device drivers.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Set the Grid to Appear as a Multi-Column List
At first, in order to hide the grid column header and footer, you need to set a false value to the following properties:
- showHeader - determines whether column header is visible or not
- showFooter - determines whether column footer is visible or not
Next, by default the grid displays horizontal and vertical lines for its cells. To create an appearance similar to a List, you can choose either to have only horizontal lines visible or to hide all lines. This can be set by changing the value of gridLines property to Horizontal or None.
The gridLines property accepts values from IntegralUIGridLines enumeration, which can be: None, Horizontal, Vertical or Both. You can use either this enumeration or plain text, for example for IntegralUIGridLines.None, you can use 'None'.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
Now we have a grid that appears as a simple list. Still, at this moment we can only show text in grid cells. To add custom HTML elements, you need to use templates.
Each column can have a different template. This allows you to add HTML elements for each column cell separately from other column cells.
Create Custom Template for Grid Cells
To create a template, you can create a function that depending on cell.cid value will determine the content that will appear under specific column.
In general, the column's id (its unique identifier) and cell's cid value must be the same so that template content appears under specific column in that specific cell.
In this example, we have two templates:
- Second column - displays an icon and information about device driver in two lines
- Last column - displays a button that when clicked will show a message
The first column displays a checkbox, which is a built-in editor in Grid component.
In first template, a <span> element is used to display an icon (the element background is rendered using a custom image), and a <div> element that shows text in two lines. The second template, contains a <div> element with a button.
Data used in these templates is part of the cell object, which you can set it up during loading data into the Grid. Based on this data (cell category, driverName and icon), the content that is shown in grid cells changes.
In order to provide user interaction when using templates, you can handle events within the template. In this case, the template has a button that when clicked will show an alert message, specifying the driver info.
Conclusion
By simple modification of CSS and some general properties of the Grid component, you can make it to appear and act as a multi-column list. In addition, when using templates you can create content by adding custom HTML elements in different layouts for each column separately. A sample code is available in JavaScript, Angular, React and Vue.
IntegralUI Web is an UI library of native web components that includes the Grid. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.