{"id":10904,"date":"2024-07-16T07:06:45","date_gmt":"2024-07-16T07:06:45","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=10904"},"modified":"2024-07-16T07:06:46","modified_gmt":"2024-07-16T07:06:46","slug":"material-react-table-with-searchable-dropdown","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/material-react-table-with-searchable-dropdown","title":{"rendered":"Material React Table with Searchable Dropdown"},"content":{"rendered":"

To add a searchable dropdown functionality to the “State” column in your Material React Table using the Autocomplete component from Material-UI, you can follow these steps. Here\u2019s how you can update your code to replace the MenuItem dropdown with the Autocomplete component:<\/p>\n

    \n
  1. Import the necessary components from Material-UI:<\/strong> Ensure you import Autocomplete and TextField from @mui\/material.<\/li>\n
  2. Update the columns definition:<\/strong> Modify the columns definition to use the Autocomplete component for the “State” column.<\/li>\n<\/ol>\n

    Here\u2019s the updated code:<\/p>\n

    \r\nimport { useMemo } from 'react';\r\nimport {\r\n  MaterialReactTable,\r\n} from 'material-react-table';\r\nimport { Autocomplete, TextField, MenuItem } from '@mui\/material';\r\n\r\nconst Example = () => {\r\n  const states = ['California', 'Texas', 'New York', 'Florida', 'Illinois']; \/\/ Example states array\r\n\r\n  const columns = useMemo(\r\n    () => [\r\n      \/\/ Other columns...\r\n      {\r\n        accessorKey: 'state',\r\n        header: 'State',\r\n        Edit: ({ row }) => (\r\n          <Autocomplete\r\n            options={states}\r\n            autoComplete\r\n            renderInput={(params) => <TextField {...params} label=\"State\" \/>}\r\n            onChange={(event, value) => {\r\n              row._valuesCache['state'] = value;\r\n            }}\r\n          \/>\r\n        ),\r\n      },\r\n    ],\r\n    [states]\r\n  );\r\n\r\n  return (\r\n    <MaterialReactTable\r\n      columns={columns}\r\n      data={[]} \/\/ Your data here\r\n      \/\/ Other props...\r\n    \/>\r\n  );\r\n};\r\n\r\nexport default Example;\r\n<\/pre>\n
     
    \nIn this updated code, the Autocomplete component is used to provide a searchable dropdown for the “State” column. The onChange event handler updates the row’s state value when a new state is selected from the dropdown. This allows users to search for and select a state from the list of options.<\/p>\n
    By incorporating the Autocomplete component from Material-UI, you can enhance the user experience with a searchable dropdown menu in your table.<\/p>\n
    Output screenshot:<\/h3>\n
    \"edit-user\"<\/p>\n","protected":false},"excerpt":{"rendered":"
    To add a searchable dropdown functionality to the “State” column in your Material React Table using the Autocomplete component from Material-UI, you can follow these steps. Here\u2019s how you can update your code to replace the MenuItem dropdown with the Autocomplete component: Import the necessary components from Material-UI: Ensure you import Autocomplete and TextField from […]<\/p>\n","protected":false},"author":1,"featured_media":10905,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10904","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10904"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=10904"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10904\/revisions"}],"predecessor-version":[{"id":10908,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10904\/revisions\/10908"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/10905"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=10904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=10904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=10904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}