React Multicolumn MultiSelect Dropdown Component
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (182).NET Core  (26).NET MAUI  (234)Angular  (115)ASP.NET  (49)ASP.NET Core  (80)ASP.NET MVC  (85)Azure  (42)Black Friday Deal  (1)Blazor  (243)BoldSign  (15)DocIO  (24)Essential JS 2  (108)Essential Studio  (198)File Formats  (73)Flutter  (141)JavaScript  (227)Microsoft  (121)PDF  (86)Python  (1)React  (107)Streamlit  (1)Succinctly series  (131)Syncfusion  (990)TypeScript  (32)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (54)Windows Forms  (59)WinUI  (72)Word  (18)WPF  (165)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (155)Chart of the week  (62)Cloud  (16)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (74)Development  (697)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (47)Extensions  (31)File Manager  (8)Gantt  (23)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (532)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (48)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (428)Uncategorized  (68)Unix  (2)User interface  (67)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (651)What's new  (355)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
React Multicolumn MultiSelect Dropdown Component

React Multicolumn MultiSelect Dropdown Component

This blog post will look at the Syncfusion React MultiSelect Dropdown component. Learn how to create and configure multiple columns in it using the template feature.

Use of the multicolumn data list

The MultiSelect Dropdown displays list items in multiple columns, like in a grid view. So, it displays more information in a single list.

Let’s suppose the user wants to select products based on unit price and units in stock. So, we provide options to allow users to filter by their search criteria (by unit price, for example). This gives them a quick and detailed glance at all relevant information regarding a product.

Using the Syncfusion React MultiSelect Dropdown, let’s efficiently implement multiple columns with the templates feature.

Create a new React application

Step 1: We’ll create the React getting started application.

First, install the create-react-app npm package in the desired location using the following command.

npx create-react-app my-app

Then, refer to the Getting Started with React Apps documentation to create a React app using the npm and yarn commands.

Step 2: Add Syncfusion packages for the MultiSelect Dropdown with the following commands.

npm install @syncfusion/ej2-react-dropdowns –save-dev

Step 3: Add the following CSS files as references for the component in the src/App.css file. These files are available in the ../node_modules/@syncfusion package folder.

@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-react-dropdowns/styles/bootstrap5.css';

Step 4: Place the following code in the src/App.js file to add the MultiSelect Dropdown component.

import './App.css';
import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';

function App() {
 return (
  // specifies the tag for rendering the MultiSelect component
  <div id="default" className='center' style={{ width: '500px'}}>
   <MultiSelectComponent placeholder="Select the products" floatLabelType="auto"/>
  </div>
 );
}
export default App;

Step 5: Configure the product data and map the field settings to populate the list in the pop-up.

// define the JSON of data
const productsData = [
  {ProductID: 1, ProductName: 'Chai', UnitPrice: 18, UnitsInStock: 39},
  {ProductID: 2, ProductName: 'Chang', UnitPrice: 19, UnitsInStock: 45},
  {ProductID: 3, ProductName: 'Aniseed Syrup', UnitPrice: 23, UnitsInStock: 79},
  {ProductID: 4, ProductName: 'Chef Anton Cajun Seasoning', UnitPrice: 28, UnitsInStock: 28},
  {ProductID: 5, ProductName: 'Gumbo Mix', UnitPrice: 11, UnitsInStock: 50},
  {ProductID: 6, ProductName: 'Grandma Boysenberry', UnitPrice: 37, UnitsInStock: 49},
  {ProductID: 7, ProductName: 'Northwoods Cranberry Sauce', UnitPrice: 23, UnitsInStock: 91},
  {ProductID: 8, ProductName: 'Mishi Kobe Niku', UnitPrice: 32, UnitsInStock: 16},
  {ProductID: 9, ProductName: 'Ikura', UnitPrice: 80, UnitsInStock: 29},
  {ProductID: 10, ProductName: 'Uncle Bob Organic Dried Pears', UnitPrice: 26, UnitsInStock: 32},
  {ProductID: 11, ProductName: 'Organic Dried Pears', UnitPrice: 29, UnitsInStock: 19}
];
// maps the appropriate column to the fields property
const fields = { text: 'ProductName', value: 'ProductID' }; 
return (
  // specifies the tag for rendering the MultiSelect component
  <div id="default" className='center' style={{ width: '500px'}}>
   <MultiSelectComponent placeholder="Select the products" floatLabelType="auto" dataSource={productsData} fields={fields} />
  </div>
);

Step 6: Now, we need to display the pop-up list item in a multicolumn view to show more information when the user opens it. Use the item template to display column data in the table view and the header template to display the table of column names.

// set the value to the header template
function headerTemplate(data) {
  return (<table><tr><th className='e-text-center'>ProductID</th><th>Product Name</th><th className='e-text-center'>Unit Price</th><th className='e-text-center'>Units In Stock</th></tr></table>);
}
// set the value to the item template
function itemTemplate(data) {
  return (<table><tbody><tr><td className='e-text-center'>{data.ProductID}</td><td>{data.ProductName}</td><td className='e-text-center'>{data.UnitPrice}</td><td className='e-text-center'>{data.UnitsInStock}</td></tr></tbody></table>);
}
return (
 // specifies the tag for rendering the MultiSelect component
 <div id="default" className='center' style={{ width: '500px'}}>
   <MultiSelectComponent placeholder="Select the products" floatLabelType="auto" headerTemplate={headerTemplate} itemTemplate={itemTemplate} dataSource={productsData} fields={fields} />
 </div>
);

Step 7: We configure the multicolumn CSS class. We have provided the multicolumn style class in the built-in Syncfusion React theme files. We need to give the multicolumn root class name e-multi-column in the cssClass API.

<MultiSelectComponent cssClass='e-multi-column' />

Run the application with the following command.

npm start

After executing the previous code examples, we’ll get output like the following screenshot. See how it displays the MultiSelect Dropdown pop-up list items information in the multicolumn view.React Multicolumn MultiSelect Dropdown Component

GitHub reference

For additional information, see the GitHub demo of the React MultiSelect Dropdown component with multiple columns.

Conclusion

Thank you for your time! I hope you can now add and show MultiSelect Dropdown items in a multicolumn view. Using the template option, you can alter the pop-up and list items, as seen in the examples in this demo.

The latest version of Essential Studio is available from the license and downloads page for current Syncfusion customers. If you are not a client, you can take advantage of our 30-day free trial to test our controls.

If you have questions, please contact us via our support forumsfeedback portal, or support portal. We are always delighted to help!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed