| <!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-developer_docs docs-version-current docs-doc-page docs-doc-id-components/ui/list" data-has-hydrated=false><head><meta charset=UTF-8><meta name=generator content="Docusaurus v3.10.1"><title data-rh=true>List | Superset</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"/><meta data-rh=true property=og:url content=https://superset.apache.org/developer-docs/components/ui/list /><meta data-rh=true property=og:locale content=en /><meta data-rh=true name=docusaurus_locale content=en /><meta data-rh=true name=docsearch:language content=en /><meta data-rh=true name=keywords content="data visualization, business intelligence, BI, dashboards, SQL, analytics, open source, Apache, charts, reporting"/><meta data-rh=true property=og:type content=website /><meta data-rh=true property=og:site_name content="Apache Superset"/><meta data-rh=true property=og:image content=https://superset.apache.org/img/superset-og-image.png /><meta data-rh=true property=og:image:width content=1200 /><meta data-rh=true property=og:image:height content=630 /><meta data-rh=true name=twitter:card content=summary_large_image /><meta data-rh=true name=twitter:image content=https://superset.apache.org/img/superset-og-image.png /><meta data-rh=true name=twitter:site content=@ApacheSuperset /><meta data-rh=true name=docusaurus_version content=current /><meta data-rh=true name=docusaurus_tag content=docs-developer_docs-current /><meta data-rh=true name=docsearch:version content=current /><meta data-rh=true name=docsearch:docusaurus_tag content=docs-developer_docs-current /><meta data-rh=true property=og:title content="List | Superset"/><meta data-rh=true name=description content="<!--"/><meta data-rh=true property=og:description content="<!--"/><link data-rh=true rel=icon href=/img/favicon.ico /><link data-rh=true rel=canonical href=https://superset.apache.org/developer-docs/components/ui/list /><link data-rh=true rel=alternate href=https://superset.apache.org/developer-docs/components/ui/list hreflang=en /><link data-rh=true rel=alternate href=https://superset.apache.org/developer-docs/components/ui/list hreflang=x-default /><link data-rh=true rel=preconnect href=https://WR5FASX5ED-dsn.algolia.net crossorigin=anonymous /><script data-rh=true type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","item":"https://superset.apache.org/developer-docs/components/ui/","name":"Core Components","position":1},{"@type":"ListItem","item":"https://superset.apache.org/developer-docs/components/ui/list","name":"List","position":2}]}</script><link rel=search type=application/opensearchdescription+xml title=Superset href=/opensearch.xml><script type=application/ld+json>{"@context":"https://schema.org","@type":"SoftwareApplication","applicationCategory":"BusinessApplication","author":{"@type":"Organization","logo":"https://www.apache.org/foundation/press/kit/asf_logo.png","name":"Apache Software Foundation","url":"https://www.apache.org/"},"description":"Apache Superset is a modern, enterprise-ready business intelligence web application for data exploration and visualization.","featureList":["Interactive dashboards","SQL IDE","40+ visualization types","Semantic layer","Role-based access control","REST API"],"license":"https://www.apache.org/licenses/LICENSE-2.0","name":"Apache Superset","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"operatingSystem":"Cross-platform","url":"https://superset.apache.org"}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebSite","name":"Apache Superset","potentialAction":{"@type":"SearchAction","query-input":"required name=search_term_string","target":{"@type":"EntryPoint","urlTemplate":"https://superset.apache.org/search?q={search_term_string}"}},"url":"https://superset.apache.org"}</script><link rel=preconnect href=https://WR5FASX5ED-dsn.algolia.net crossorigin=anonymous><link rel=preconnect href=https://analytics.apache.org><script src=https://widget.kapa.ai/kapa-widget.bundle.js async data-website-id=c6a8a8b8-3127-48f9-97a7-51e9e10d20d0 data-project-name="Apache Superset" data-project-color=#FFFFFF data-project-logo=https://superset.apache.org/img/superset-logo-icon-only.png data-modal-override-open-id=ask-ai-input data-modal-override-open-class=search-input data-modal-disclaimer="This is a custom LLM for Apache Superset with access to all [documentation](superset.apache.org/docs/intro/), [GitHub Open Issues, PRs and READMEs](github.com/apache/superset).&#10;&#10;Companies deploy assistants like this ([built by kapa.ai](https://kapa.ai)) on docs via [website widget](https://docs.kapa.ai/integrations/website-widget) (Docker, Reddit), in [support forms](https://docs.kapa.ai/integrations/support-form-deflector) for ticket deflection (Monday.com, Mapbox), or as [Slack bots](https://docs.kapa.ai/integrations/slack-bot) with private sources." data-modal-example-questions="How do I install Superset?,How can I contribute to Superset?" data-button-text-color=rgb(81,166,197) data-modal-header-bg-color=#ffffff data-modal-title-color=rgb(81,166,197) data-modal-title="Apache Superset AI" data-modal-disclaimer-text-color=#000000 data-consent-required=true data-consent-screen-disclaimer="By clicking "I agree, let's chat", you consent to the use of the AI assistant in accordance with kapa.ai's [Privacy Policy](https://www.kapa.ai/content/privacy-policy). This service uses reCAPTCHA, which requires your consent to Google's [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms). By proceeding, you explicitly agree to both kapa.ai's and Google's privacy policies."></script><link rel=stylesheet href=/assets/css/styles.c802b717.css /><script src=/assets/js/runtime~main.d3cd9308.js defer></script><script src=/assets/js/main.198cbbee.js defer></script></head><body><svg style="display: none;"><defs> |
| <symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol> |
| </defs></svg> |
| <script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/superset-logo-horiz.svg alt="Superset Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"/><img src=/img/superset-logo-horiz-dark.svg alt="Superset Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"/></div></a><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/user-docs/>Users</a><ul class=dropdown__menu><li><a class=dropdown__link href=/user-docs/>Overview</a><li><a class=dropdown__link href=/user-docs/quickstart>Quickstart</a><li><a class=dropdown__link href=/user-docs/using-superset/creating-your-first-dashboard>Using Superset</a><li><a class=dropdown__link href=/user-docs/databases/>Connecting to Databases</a><li><a class=dropdown__link href=/user-docs/faq>FAQ</a></ul></div><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/admin-docs/>Admins</a><ul class=dropdown__menu><li><a class=dropdown__link href=/admin-docs/>Overview</a><li><a class=dropdown__link href=/admin-docs/installation/installation-methods>Installation</a><li><a class=dropdown__link href=/admin-docs/configuration/configuring-superset>Configuration</a><li><a class=dropdown__link href=/user-docs/databases/>Database Drivers</a><li><a class=dropdown__link href=/admin-docs/security/>Security</a></ul></div><div class="navbar__item dropdown dropdown--hoverable"><a aria-current=page class="navbar__link active" aria-haspopup=true aria-expanded=false role=button href=/developer-docs/>Developers</a><ul class=dropdown__menu><li><a class=dropdown__link href=/developer-docs/>Overview</a><li><a class=dropdown__link href=/developer-docs/contributing/overview>Contributing</a><li><a class=dropdown__link href=/developer-docs/extensions/overview>Extensions</a><li><a class=dropdown__link href=/developer-docs/testing/overview>Testing</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/developer-docs/components/>UI Components</a><li><a class=dropdown__link href=/developer-docs/api>API Reference</a></ul></div><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/community>Community</a><ul class=dropdown__menu><li><a class=dropdown__link href=/community>Resources</a><li><a href=https://github.com/apache/superset target=_blank rel="noopener noreferrer" class=dropdown__link>GitHub<svg width=12 height=12 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li><a href=http://bit.ly/join-superset-slack target=_blank rel="noopener noreferrer" class=dropdown__link>Slack<svg width=12 height=12 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li><a href=https://lists.apache.org/list.html?dev@superset.apache.org target=_blank rel="noopener noreferrer" class=dropdown__link>Mailing List<svg width=12 height=12 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li><a href=https://stackoverflow.com/questions/tagged/apache-superset target=_blank rel="noopener noreferrer" class=dropdown__link>Stack Overflow<svg width=12 height=12 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li><a class=dropdown__link href=/community#superset-community-calendar>Community Calendar</a><li><a class=dropdown__link href=/inTheWild>In the Wild</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><style data-emotion="css kad2tq">.css-kad2tq{z-index:2;border-radius:10px;align-items:stretch;width:176px;margin-right:20px;font-size:18px;font-weight:700;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;overflow:hidden}.css-kad2tq .split-main{color:#fff;-webkit-flex:1;-ms-flex:1;flex:1;justify-content:center;align-items:center;min-width:0;padding:7px 8px;-webkit-text-decoration:none;text-decoration:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.css-kad2tq .split-main:hover{color:#fff}.css-kad2tq .split-divider{background:#ffffff61;-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;align-self:stretch;width:1px;margin:6px 0}.css-kad2tq .split-dropdown-trigger{cursor:pointer;color:#fff;background:0 0;border:none;-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;justify-content:center;align-items:center;width:38px;margin:0;padding:0;font-size:10px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.css-kad2tq .split-dropdown-trigger:hover{color:#fff}</style><div class="default-button-theme get-started-split get-started-button css-kad2tq"><a class=split-main href=/user-docs/>Get Started</a><span class=split-divider aria-hidden=true></span><button type=button class="ant-dropdown-trigger split-dropdown-trigger" aria-haspopup=menu aria-label="Choose documentation: Users, Admins, or Developers"><span role=img aria-label=down class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable=false data-icon=down width=1em height=1em fill=currentColor aria-hidden=true><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"/></svg></span></button></div><a href=https://github.com/apache/superset target=_blank rel="noopener noreferrer" class="navbar__item navbar__link github-button"></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_Bca1><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Meta+k)" aria-keyshortcuts=Meta+k><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 24 24" aria-hidden=true><circle cx=11 cy=11 r=8 stroke=currentColor fill=none stroke-width=1.4 /><path d="m21 21-4.3-4.3" stroke=currentColor fill=none stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class=docsWrapper_hBAB><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type=button></button><div class=docRoot_UBD9><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class=sidebarViewport_aRkj><div class=sidebar_njMd><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/developer-docs/><span title=Overview class=linkLabel_WmDU>Overview</span></a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/developer-docs/contributing/overview><span title=Contributing class=categoryLinkLabel_W154>Contributing</span></a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/developer-docs/extensions/overview><span title=Extensions class=categoryLinkLabel_W154>Extensions</span></a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/developer-docs/testing/overview><span title=Testing class=categoryLinkLabel_W154>Testing</span></a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true href=/developer-docs/components/><span title="UI Components" class=categoryLinkLabel_W154>UI Components</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/><span title=Overview class=linkLabel_WmDU>Overview</span></a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist" tabindex=0 href=/developer-docs/components/design-system/><span title="Layout Components" class=categoryLinkLabel_W154>Layout Components</span></a><button aria-label="Expand sidebar category 'Layout Components'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist" tabindex=0 href=/developer-docs/components/extension/><span title="Extension Components" class=categoryLinkLabel_W154>Extension Components</span></a><button aria-label="Expand sidebar category 'Extension Components'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--active" tabindex=0 href=/developer-docs/components/ui/><span title="Core Components" class=categoryLinkLabel_W154>Core Components</span></a><button aria-label="Collapse sidebar category 'Core Components'" aria-expanded=true type=button class="clean-btn menu__caret"></button></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/autocomplete><span title=AutoComplete class=linkLabel_WmDU>AutoComplete</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/avatar><span title=Avatar class=linkLabel_WmDU>Avatar</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/badge><span title=Badge class=linkLabel_WmDU>Badge</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/breadcrumb><span title=Breadcrumb class=linkLabel_WmDU>Breadcrumb</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/button><span title=Button class=linkLabel_WmDU>Button</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/buttongroup><span title=ButtonGroup class=linkLabel_WmDU>ButtonGroup</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/cachedlabel><span title=CachedLabel class=linkLabel_WmDU>CachedLabel</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/card><span title=Card class=linkLabel_WmDU>Card</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/checkbox><span title=Checkbox class=linkLabel_WmDU>Checkbox</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/collapse><span title=Collapse class=linkLabel_WmDU>Collapse</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/datepicker><span title=DatePicker class=linkLabel_WmDU>DatePicker</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/divider><span title=Divider class=linkLabel_WmDU>Divider</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/editabletitle><span title=EditableTitle class=linkLabel_WmDU>EditableTitle</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/emptystate><span title=EmptyState class=linkLabel_WmDU>EmptyState</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/favestar><span title=FaveStar class=linkLabel_WmDU>FaveStar</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/iconbutton><span title=IconButton class=linkLabel_WmDU>IconButton</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/icons><span title=Icons class=linkLabel_WmDU>Icons</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/icontooltip><span title=IconTooltip class=linkLabel_WmDU>IconTooltip</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/infotooltip><span title=InfoTooltip class=linkLabel_WmDU>InfoTooltip</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/input><span title=Input class=linkLabel_WmDU>Input</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/label><span title=Label class=linkLabel_WmDU>Label</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/developer-docs/components/ui/list><span title=List class=linkLabel_WmDU>List</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/listviewcard><span title=ListViewCard class=linkLabel_WmDU>ListViewCard</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/loading><span title=Loading class=linkLabel_WmDU>Loading</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/menu><span title=Menu class=linkLabel_WmDU>Menu</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/modal><span title=Modal class=linkLabel_WmDU>Modal</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/modaltrigger><span title=ModalTrigger class=linkLabel_WmDU>ModalTrigger</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/popover><span title=Popover class=linkLabel_WmDU>Popover</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/progressbar><span title=ProgressBar class=linkLabel_WmDU>ProgressBar</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/radio><span title=Radio class=linkLabel_WmDU>Radio</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/safemarkdown><span title=SafeMarkdown class=linkLabel_WmDU>SafeMarkdown</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/select><span title=Select class=linkLabel_WmDU>Select</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/skeleton><span title=Skeleton class=linkLabel_WmDU>Skeleton</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/slider><span title=Slider class=linkLabel_WmDU>Slider</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/steps><span title=Steps class=linkLabel_WmDU>Steps</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/switch><span title=Switch class=linkLabel_WmDU>Switch</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/tablecollection><span title=TableCollection class=linkLabel_WmDU>TableCollection</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/tableview><span title=TableView class=linkLabel_WmDU>TableView</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/tabs><span title=Tabs class=linkLabel_WmDU>Tabs</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/timer><span title=Timer class=linkLabel_WmDU>Timer</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/tooltip><span title=Tooltip class=linkLabel_WmDU>Tooltip</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/tree><span title=Tree class=linkLabel_WmDU>Tree</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/treeselect><span title=TreeSelect class=linkLabel_WmDU>TreeSelect</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/typography><span title=Typography class=linkLabel_WmDU>Typography</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/unsavedchangesmodal><span title=UnsavedChangesModal class=linkLabel_WmDU>UnsavedChangesModal</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/developer-docs/components/ui/upload><span title=Upload class=linkLabel_WmDU>Upload</span></a></ul><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item hidden"><a class=menu__link tabindex=0 href=/developer-docs/components/TODO><span title="Components TODO" class=linkLabel_WmDU>Components TODO</span></a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist" href=/developer-docs/api><span title="API Reference" class=categoryLinkLabel_W154>API Reference</span></a><button aria-label="Expand sidebar category 'API Reference'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div></ul></nav><button type=button title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width=20 height=20 aria-hidden=true class=collapseSidebarButtonIcon_kv0_><g fill=#7a7a7a><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"/><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"/></g></svg></button></div></div></aside><main class=docMainContainer_TBSr><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_xLCN"><div class="theme-doc-version-banner alert alert--warning margin-bottom--md" role=alert><div>This is unreleased documentation for <!-- -->Superset<!-- --> <b>Next</b> version.</div><div class=margin-top--md>For up-to-date documentation, see the <b><a href=/developer-docs/components/ui/list>latest version</a></b> (<!-- -->Next<!-- -->).</div></div><div class=docItemContainer_jfFK><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label=Breadcrumbs><ul class=breadcrumbs><li class=breadcrumbs__item><a aria-label="Home page" class=breadcrumbs__link href=/><svg viewBox="0 0 24 24" class=breadcrumbHomeIcon_YNFT><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill=currentColor /></svg></a><li class=breadcrumbs__item><span class=breadcrumbs__link>UI Components</span><li class=breadcrumbs__item><a class=breadcrumbs__link href=/developer-docs/components/ui/><span>Core Components</span></a><li class="breadcrumbs__item breadcrumbs__item--active"><span class=breadcrumbs__link>List</span></ul></nav><span class=versionBadge_QOso>Version:<!-- --> <a class="ant-dropdown-trigger versionSelector_oOvN">Next<!-- --> <span role=img aria-label=down class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable=false data-icon=down width=1em height=1em fill=currentColor aria-hidden=true><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"/></svg></span></a></span><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type=button class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><div class=row><div class="col col--12 markdown"><header><h1>List</h1></header> |
| <p>The List component from Superset's UI library.</p> |
| <h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=live-example>Live Example<a href=#live-example class=hash-link aria-label="Direct link to Live Example" title="Direct link to Live Example" translate=no></a></h2> |
| <div style="border:1px solid #e8e8e8;border-radius:4px;padding:20px;margin-bottom:20px;min-height:100px;display:flex;align-items:center;justify-content:center;color:#999">Loading component...</div> |
| <h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=try-it>Try It<a href=#try-it class=hash-link aria-label="Direct link to Try It" title="Direct link to Try It" translate=no></a></h2> |
| <p>Edit the code below to experiment with the component:</p> |
| <div class=playgroundContainer_XwyR><div class=playgroundHeader_EIHj><div class=playgroundHeaderContent_Kpsj>Live Editor</div><div class=playgroundHeaderButtons_kAaH><button type=button aria-label="Reset code to original" title=Reset class="clean-btn resetButton_EgHb"><svg class=resetButtonIcon_yysN viewBox="0 0 16 16" fill=currentColor aria-hidden=true><path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/></svg>Reset</button></div></div><div class=playgroundEditor_L2Ll><pre class="prism-code language-tsx" style=margin:0;outline:none;padding:10px;font-family:inherit;color:#9CDCFE;background-color:#1E1E1E spellcheck=false><span class=token-line style=color:#9CDCFE><span class="token keyword" style="color:rgb(86, 156, 214)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">Demo</span><span class="token punctuation" style="color:rgb(212, 212, 212)">(</span><span class="token punctuation" style="color:rgb(212, 212, 212)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"></span> |
| </span><span class=token-line style=color:#9CDCFE><span class="token plain"> </span><span class="token keyword" style="color:rgb(86, 156, 214)">const</span><span class="token plain"> data </span><span class="token operator" style="color:rgb(212, 212, 212)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">[</span><span class="token string" style="color:rgb(206, 145, 120)">'Dashboard Analytics'</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">'User Management'</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">'Data Sources'</span><span class="token punctuation" style="color:rgb(212, 212, 212)">]</span><span class="token punctuation" style="color:rgb(212, 212, 212)">;</span><span class="token plain"></span> |
| </span><span class=token-line style=color:#9CDCFE><span class="token plain"> </span><span class="token keyword" style="color:rgb(86, 156, 214)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">(</span><span class="token plain"></span> |
| </span><span class=token-line style=color:#9CDCFE><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(212, 212, 212)"><</span><span class="token tag class-name" style="color:rgb(78, 201, 176)">List</span><span class="token tag" style="color:rgb(78, 201, 176)"></span> |
| </span><span class=token-line style=color:#9CDCFE><span class="token tag" style="color:rgb(78, 201, 176)"> </span><span class="token tag attr-name" style="color:rgb(156, 220, 254)">bordered</span><span class="token tag" style="color:rgb(78, 201, 176)"></span> |
| </span><span class=token-line style=color:#9CDCFE><span class="token tag" style="color:rgb(78, 201, 176)"> </span><span class="token tag attr-name" style="color:rgb(156, 220, 254)">dataSource</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(212, 212, 212)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token tag script language-javascript" style="color:rgb(78, 201, 176)">data</span><span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token tag" style="color:rgb(78, 201, 176)"></span> |
| </span><span class=token-line style=color:#9CDCFE><span class="token tag" style="color:rgb(78, 201, 176)"> </span><span class="token tag attr-name" style="color:rgb(156, 220, 254)">renderItem</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(212, 212, 212)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">(</span><span class="token tag script language-javascript" style="color:rgb(78, 201, 176)">item</span><span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">)</span><span class="token tag script language-javascript" style="color:rgb(78, 201, 176)"> </span><span class="token tag script language-javascript arrow operator" style="color:rgb(212, 212, 212)">=></span><span class="token tag script language-javascript" style="color:rgb(78, 201, 176)"> </span><span class="token tag script language-javascript tag punctuation" style="color:rgb(212, 212, 212)"><</span><span class="token tag script language-javascript tag class-name" style="color:rgb(78, 201, 176)">List.Item</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(212, 212, 212)">></span><span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token tag script language-javascript" style="color:rgb(78, 201, 176)">item</span><span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(212, 212, 212)"></</span><span class="token tag script language-javascript tag class-name" style="color:rgb(78, 201, 176)">List.Item</span><span class="token tag script language-javascript tag punctuation" style="color:rgb(212, 212, 212)">></span><span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token tag" style="color:rgb(78, 201, 176)"></span> |
| </span><span class=token-line style=color:#9CDCFE><span class="token tag" style="color:rgb(78, 201, 176)"> </span><span class="token tag punctuation" style="color:rgb(212, 212, 212)">/></span><span class="token plain"></span> |
| </span><span class=token-line style=color:#9CDCFE><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">)</span><span class="token punctuation" style="color:rgb(212, 212, 212)">;</span><span class="token plain"></span> |
| </span><span class=token-line style=color:#9CDCFE><span class="token plain"></span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span> |
| </span></pre></div><div class=playgroundHeader_EIHj><div class=playgroundHeaderContent_Kpsj>Result</div></div><div class=playgroundPreview_xyEi><div>Loading...</div></div></div> |
| <h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=props>Props<a href=#props class=hash-link aria-label="Direct link to Props" title="Direct link to Props" translate=no></a></h2> |
| <table><thead><tr><th>Prop<th>Type<th>Default<th>Description<tbody><tr><td><code>bordered</code><td><code>boolean</code><td><code>false</code><td>Whether to show a border around the list.<tr><td><code>split</code><td><code>boolean</code><td><code>true</code><td>Whether to show a divider between items.<tr><td><code>size</code><td><code>string</code><td><code>"default"</code><td>Size of the list.<tr><td><code>loading</code><td><code>boolean</code><td><code>false</code><td>Whether to show a loading indicator.<tr><td><code>dataSource</code><td><code>any</code><td><code>["Dashboard Analytics","User Management","Data Sources"]</code><td>-</table> |
| <h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=import>Import<a href=#import class=hash-link aria-label="Direct link to Import" title="Direct link to Import" translate=no></a></h2> |
| <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#9CDCFE;--prism-background-color:#1E1E1E><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style=color:#9CDCFE;background-color:#1E1E1E><code class=codeBlockLines_e6Vv><div class=token-line style=color:#9CDCFE><span class="token keyword" style="color:rgb(86, 156, 214)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">List</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(86, 156, 214)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">'@superset-ui/core/components'</span><span class="token punctuation" style="color:rgb(212, 212, 212)">;</span><br/></div></code></pre></div></div> |
| <hr/> |
| <div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class=admonitionHeading_Gvgb><span class=admonitionIcon_Rf37><svg viewBox="0 0 12 16"><path fill-rule=evenodd d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"/></svg></span>Improve this page</div><div class=admonitionContent_BuS1><p>This documentation is auto-generated from the component's Storybook story. |
| Help improve it by <a href=https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/List/List.stories.tsx target=_blank rel="noopener noreferrer" class="">editing the story file</a>.</div></div></div></div></div><div class=row><div class="col col--12"><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_WFHX"><a href=https://github.com/apache/superset/edit/master/docs/developer_docs/developer_docs/components/ui/list.mdx target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_Z9Sw aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"><span class=theme-last-updated>Last updated<!-- --> on <b><time datetime=2026-07-11T22:03:24.000Z itemprop=dateModified>Jul 11, 2026</time></b> by <b>Elizabeth Thompson</b></span></div></div></footer></div></div></article><div class=row><div class="col col--12"><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/developer-docs/components/ui/label><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Label</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/developer-docs/components/ui/listviewcard><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>ListViewCard</div></a></nav></div></div></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#live-example class="table-of-contents__link toc-highlight">Live Example</a><li><a href=#try-it class="table-of-contents__link toc-highlight">Try It</a><li><a href=#props class="table-of-contents__link toc-highlight">Props</a><li><a href=#import class="table-of-contents__link toc-highlight">Import</a></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer"><div class="container container-fluid"><div class="footer__bottom text--center"><div class=footer__copyright> |
| <div class=footer__social-links> |
| <a href=https://bit.ly/join-superset-slack target=_blank rel="noopener noreferrer" title="Join us on Slack" aria-label=Slack> |
| <img src=/img/community/slack-symbol.svg alt=Slack /> |
| </a> |
| <a href=https://x.com/apachesuperset target=_blank rel="noopener noreferrer" title="Follow us on X" aria-label=X> |
| <img src=/img/community/x-symbol.svg alt=X /> |
| </a> |
| <a href=https://www.linkedin.com/company/apache-superset target=_blank rel="noopener noreferrer" title="Follow us on LinkedIn" aria-label=LinkedIn> |
| <img src=/img/community/linkedin-symbol.svg alt=LinkedIn /> |
| </a> |
| <a href=https://bsky.app/profile/apachesuperset.bsky.social target=_blank rel="noopener noreferrer" title="Follow us on Bluesky" aria-label=Bluesky> |
| <img src=/img/community/bluesky-symbol.svg alt=Bluesky /> |
| </a> |
| <a href=https://reddit.com/r/apache-superset target=_blank rel="noopener noreferrer" title="Follow us on Reddit" aria-label=Reddit> |
| <img src=/img/community/reddit-symbol.svg alt=Reddit /> |
| </a> |
| </div> |
| <div class=footer__ci-services> |
| <span>CI powered by</span> |
| <a href=https://www.netlify.com/ target=_blank rel="nofollow noopener noreferrer"><img src=/img/netlify.png alt=Netlify title="Netlify - Deploy Previews"/></a> |
| </div> |
| <p>Copyright © 2026, |
| The <a href=https://www.apache.org/ target=_blank rel=noreferrer>Apache Software Foundation</a>, |
| Licensed under the Apache <a href=https://apache.org/licenses/LICENSE-2.0 target=_blank rel=noreferrer>License</a>.</p> |
| <p><small>Apache Superset, Apache, Superset, the Superset logo, and the Apache feather logo are either registered trademarks or trademarks of The Apache Software Foundation. All other products or name brands are trademarks of their respective holders, including The Apache Software Foundation. |
| <a href=https://www.apache.org/ target=_blank>Apache Software Foundation</a> resources</small></p> |
| <img class=footer__divider src=/img/community/line.png alt=Divider /> |
| <p> |
| <small> |
| <a href=/admin-docs/security/ target=_blank rel=noreferrer>Security</a> | |
| <a href=https://www.apache.org/foundation/sponsorship.html target=_blank rel=noreferrer>Donate</a> | |
| <a href=https://www.apache.org/foundation/thanks.html target=_blank rel=noreferrer>Thanks</a> | |
| <a href=https://apache.org/events/current-event target=_blank rel=noreferrer>Events</a> | |
| <a href=https://apache.org/licenses/ target=_blank rel=noreferrer>License</a> | |
| <a href=https://privacy.apache.org/policies/privacy-policy-public.html target=_blank rel=noreferrer>Privacy</a> |
| </small> |
| </p> |
| <!-- telemetry/analytics pixel: --> |
| <img referrerpolicy=no-referrer-when-downgrade src="https://static.scarf.sh/a.png?x-pxid=39ae6855-95fc-4566-86e5-360d542b0a68"/> |
| </div></div></div></footer></div></body> |