EditableTitle

The EditableTitle component from Superset's UI library.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <EditableTitle
      title="My Dashboard"
      canEdit
      showTooltip
      certifiedBy="Data Team"
      certificationDetails="Verified Q1 2024"
      onSaveTitle={(newTitle) => console.log('Saved:', newTitle)}
    />
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
canEdit	boolean	true	Whether the title can be edited.
editing	boolean	false	Whether the title is currently in edit mode.
emptyText	string	"Empty text"	Text to display when title is empty.
noPermitTooltip	string	"Not permitted"	Tooltip shown when user lacks edit permission.
showTooltip	boolean	true	Whether to show tooltip on hover.
title	string	"Title"	The title text to display.
defaultTitle	string	"Default title"	Default title when none is provided.
placeholder	string	"Placeholder"	Placeholder text when editing.
certifiedBy	string	""	Name of person/team who certified this item.
certificationDetails	string	""	Additional certification details or description.
maxWidth	number	100	Maximum width of the title in pixels.
autoSize	boolean	true	Whether to auto-size based on content.

Import

import { EditableTitle } from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.