React Multicolumn MultiSelect Dropdown Component
Tags: react, development, ui, dropdown
Published: 2023-02-21 13:58:40

---
title: React Multicolumn MultiSelect Dropdown Component
published: true
date: 2023-02-21 11:30:00 UTC
tags: react, development, ui, dropdown
canonical_url: https://www.syncfusion.com/blogs/post/react-multicolumn-multiselect-dropdown.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtd7l9ckmr36elzwur9g.png
---
This blog post will look at the Syncfusion [React MultiSelect Dropdown](https://www.syncfusion.com/react-components/react-multiselect-dropdown "React MultiSelect Dropdown component") 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](https://www.npmjs.com/package/create-react-app "create-react-app npm package") 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](https://create-react-app.dev/docs/getting-started/ "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](https://www.npmjs.com/package/@syncfusion/ej2-react-dropdowns "@syncfusion/ej2-react-dropdowns npm package") 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.

```js
@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.

```js
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.

```js
// 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](https://ej2.syncfusion.com/react/documentation/api/multi-select/#itemtemplate "itemTemplate property of React MultiSelect Dropdown component") to display column data in the table view and the [header template](https://ej2.syncfusion.com/react/documentation/api/multi-select/#headertemplate "headerTemplate property of React MultiSelect Dropdown component") to display the table of column names.

```js
// 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](https://ej2.syncfusion.com/react/documentation/api/multi-select/#cssclass "cssClass property of React MultiSelect Dropdown component") API.

```xml
<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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/React-Multicolumn-MultiSelect-Dropdown-Component-1.png)

## GitHub reference

For additional information, see the GitHub demo of the [React MultiSelect Dropdown component with multiple columns](https://github.com/SyncfusionExamples/react-multiselect-dropdown-with-multiple-columns "Syncfusion React Multiselect Dropdown with Multiple Columns GitHub demo").

## 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](https://ej2.syncfusion.com/react/demos/#/bootstrap5/multi-select/default "React MultiSelect Dropdown component live demo").

The latest version of Essential Studio is available from the [license and downloads page](https://www.syncfusion.com/account/downloads "License and downlaods page for Essential Studio") for current Syncfusion customers. If you are not a client, you can take advantage of our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to test our controls.

If you have questions, please contact us via our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"), or [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"). We are always delighted to help!

## Related blogs

- [7 VS Code Extensions for React Developers](https://www.syncfusion.com/blogs/post/7-vs-code-extensions-for-react-developers.aspx "Blog: 7 VS Code Extensions for React Developers")
- [Create a Simple Dashboard for Data Analysis in React](https://www.syncfusion.com/blogs/post/create-a-simple-dashboard-for-data-analysis-in-react.aspx "Blog: Create a Simple Dashboard for Data Analysis in React")
- [Create a Redux Form with Syncfusion React Components](https://www.syncfusion.com/blogs/post/create-redux-form-with-syncfusion-react-components.aspx "Blog: Create a Redux Form with Syncfusion React Components")
- [Integrate Syncfusion React Mention Component with Rich Text Editor](https://www.syncfusion.com/blogs/post/integrate-react-mention-component-with-rich-text-editor.aspx "Blog: Integrate Syncfusion React Mention Component with Rich Text Editor")