Table

⌘

Display tabular data in row format

Overview

Tables are used to organize and display data efficiently in a grid-like format of rows and columns. The table component allows for customization with additional functionality, as needed by users. This may include data sorting as well as filtering through search.

Default

Note: This component is a work in progress. Its functionality is not fully realized in this document.

Features	Basic	Growth	Enterprise
Monthly active users	10,000	25,000	Custom
Group chats	Up to 30 participants	Up to 300 participants	Custom
Support	Chat	Priority chat + email	Priority phone + chat + email
Customizable UI
Domain masking	Not included–	Not included–

| Features             | Basic                                                                                                              | Growth                                                                                                             | Enterprise                                                                                                         |
| -------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
| Monthly active users | 10,000                                                                                                             | 25,000                                                                                                             | Custom                                                                                                             |
| Group chats          | Up to 30 participants                                                                                              | Up to 300 participants                                                                                             | Custom                                                                                                             |
| Support              | Chat                                                                                                               | Priority chat + email                                                                                              | Priority phone + chat + email                                                                                      |
| Customizable UI      | <div className="p-1 font-semibold inline-block rounded-full bg-blue-500 text-white"><Icon.Check size={16} /></div> | <div className="p-1 font-semibold inline-block rounded-full bg-blue-500 text-white"><Icon.Check size={16} /></div> | <div className="p-1 font-semibold inline-block rounded-full bg-blue-500 text-white"><Icon.Check size={16} /></div> |
| Domain masking       | <span className="sr-only">Not included</span>–                                                                                                                  | <span className="sr-only">Not included</span>–                                                                                                                  | <div className="p-1 font-semibold inline-block rounded-full bg-blue-500 text-white"><Icon.Check size={16} /></div> |

Alternative

Features	Basic $279 / month	Growth $569 / month	Enterprise Customized
Monthly active users	10,000	25,000	Custom
Group chats	Up to 30 participants	Up to 300 participants	Custom
Support	Chat	Priority chat + email	Priority phone + chat + email
Customizable UI
Domain masking	Not included–	Not included–

<table className="pricing border-collapse border-b">
  <thead>
    <tr>
      <th className="w-1/4"><span className="sr-only">Features</span></th>
      <th className="w-1/4 text-center p-6">
        <div className="tier-title text-2xl mb-2">Basic</div>
        <div className="tier-price font-medium mb-6">$279 / month</div>
        <div className="tier-button">
          <button className="px-4 py-3 font-semibold rounded-xl bg-blue-200 text-blue-500 text-base hover:shadow-3xl hover:shadow-blue-200 ease-in-out duration-200">
            Try for free
          </button>
        </div>
      </th>
      <th className="w-1/4 text-center p-6 bg-blue-200">
        <div className="tier-title text-2xl mb-2 text-blue-500">Growth</div>
        <div className="tier-price font-medium mb-6 text-blue-500">$569 / month</div>
        <div className="tier-button">
          <button className="px-4 py-3 font-semibold rounded-xl bg-blue-500 text-white text-base hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200">
            Try for free
          </button>
        </div>
      </th>
      <th className="w-1/4 text-center p-6 bg-blue-500">
        <div className="tier-title text-2xl mb-2 text-white">Enterprise</div>
        <div className="tier-price font-medium mb-6 text-white">Customized</div>
        <div className="tier-button">
          <button className="px-4 py-3 font-semibold rounded-xl bg-white text-blue-500 text-base hover:shadow-3xl hover:shadow-white ease-in-out duration-200">
            Get in touch
          </button>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monthly active users</td>
      <td>10,000</td>
      <td className="bg-blue-200 text-blue-500">25,000</td>
      <td className="bg-blue-500 text-white">Custom</td>
    </tr>
    <tr>
      <td>Group chats</td>
      <td>Up to 30 participants</td>
      <td className="bg-blue-200 text-blue-500">Up to 300 participants</td>
      <td className="bg-blue-500 text-white">Custom</td>
    </tr>
    <tr>
      <td>Support</td>
      <td>Chat</td>
      <td className="bg-blue-200 text-blue-500">Priority chat + email</td>
      <td className="bg-blue-500 text-white">Priority phone + chat + email</td>
    </tr>
    <tr>
      <td>Customizable UI</td>
      <td>
        <div className="p-1 font-semibold inline-block rounded-full bg-blue-500 text-white">
          <Icon.Check size={16} />
        </div>
      </td>
      <td className="bg-blue-200 text-blue-500">
        <div className="p-1 font-semibold inline-block rounded-full bg-blue-500 text-white">
          <Icon.Check size={16} />
        </div>
      </td>
      <td className="bg-blue-500 text-white">
        <div className="p-1 font-semibold inline-block rounded-full bg-white text-blue-500">
          <Icon.Check size={16} />
        </div>
      </td>
    </tr>
    <tr>
      <td>Domain masking</td>
      <td><span className="sr-only">Not included</span>–</td>
      <td className="bg-blue-200 text-blue-500"><span className="sr-only">Not included</span>–</td>
      <td className="bg-blue-500 text-white">
        <div className="p-1 font-semibold inline-block rounded-full bg-white text-blue-500">
          <Icon.Check size={16} />
        </div>
      </td>
    </tr>
  </tbody>
</table>