Plan Table

A drop-in plan table component to power your pricing page.

The Plan Table component makes it easy to show all of your features and plans on your website. This component is responsive and customizable to your website's style and widths.

Installation

Once the main web component package has been installed on your page, you can add the web component anywhere on the page you would like it to display.

The following is an example of the code snippet provided to you after creating an embed instance:

<plangraph-plan-table embed="EMBED_ID_HERE"></plangraph-plan-table>

Event Listeners

If you have configured one of the CTAs in your embed to use JavaScript Action instead of URI you can add a hook for this event by registering an event listener on the plan table element:

document.getElementsByTagName("plangraph-plan-table")[0].addEventListener("ctaClick", e => {
console.log(e.detail.cost); // plan cost for the chosen plan
console.log(e.detail.planSlug); // plan slug for the chosen plan
console.log(e.detail.displayName); // human-readable name for the plan
console.log(e.detail.userSelection); // feature-selections by the user
})

You can use this event to trigger your application's subscription workflow.

Layout Responsiveness

The Plan Table component is built to respond to different screen sizes and adjust the layout. By default, the table will scroll horizontally while pinning the features column for a better experience for the end user.

Breakpoints:

  • 1400px

    Default plan table view

  • 990px Default plan table view

  • 766px Plan cards display features inline next to values, cards presented with horizontal scroll

  • 477px Same as above but features display above values

Theming

Customize the Plan Table by modifying these style attributes wherever you embed the component. Learn more about theming web components in PlanGraph.

Shadow Parts available in Plan Table

Shadow parts are made available for you to style certain elements directly. Learn more about theming web components in PlanGraph.

Part

Description

table

The table element.

cell

All cells in the table.

header-cell

All plan header cells.

feature-cell

All feature cells.

feature-header-cell

Header cell of the features column.

feature-footer-cell

Footer cell of the features column.

value-cell

All feature value cells.

cta

All Call-to-action buttons.

plan--<plan-slug>

All cells for a given plan slug.

plan-header--<plan-slug>

Header cell for a given plan slug.

plan-cost

All plan cost elements.

plan-cost--<plan-slug>

Plan cost element for a given plan.

footer-cell

All footer cells.

cta--<plan-slug>

Call-to-action button for a given plan slug.

cta-cell

All cells containing a call-to-action button.

CSS variables used by Plan Table

Use these variables to customize the look and feel of your embed:

/* Primary color, used for primary CTAS and focus */
--plangraph-color-brand: [your value];
/* Appears on top of --plangraph-color-brand;
Should have a high contrast */
--plangraph-color-brand-accent: [your value];
/* Primary text color */
--plangraph-color-text: [your value];
/* Secondary text color for help text, tooltips, etc.
Should be less prominent than --plangraph-color-text. */
--plangraph-color-text-secondary: [your value];
/* Appears behind text and secondary text;
should have a high contrast */
--plangraph-color-background: [your value];
/* Affects the borders between cells
and borders of various other elements*/
--plangraph-border: [your value];
/* Horizontal borders between cells
and borders of various elements. */
-plangraph-border-secondary: [your value];
/* Border-radius of some elements */
--plangraph-radius: [your value];
/* Color used to show error messages
and invalid states on inputs */
--plangraph-color-error: [your value];
/* Appears on top of --plangraph-color-error */
--plangraph-color-error-accent: [your value];
/* Color used to show disabled states for
various inputs */
--plangraph-color-disabled: [your value];
/* Appears on top of --plangraph-color-disabled-accent */
--plangraph-color-disabled-accent: [your value];

Slots available in Plan Table

Slot

Description

loader

Add a custom loader element to show while the component is loading