How to have a panel title bar in two different ways that conform with material design

[simkimsia]

Hi @amorey,

Thanks for answering my email and also congrats on your new born.

I am a backend developer and still trying to learn frontend using your framework.

I am the guy who's trying to create datatable using muicss.

Right now, my next step is to create an effect that looks similar to https://propeller.in/html-themes/propeller-admin/data-table.html

Notice the two different ways the title looks? How do I do that using muicss?

Right now, I already have a table sitting inside a panel

<div class="mui-container-fluid">
        <br>
        <h1>Brand.io</h1>
        <div class="mui-panel">
          <table class="mui-table">
            <thead>
              <tr>
                <th>Column 1</th>
                <th>Column 2</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Cell 1-1</td>
                <td>Cell 1-2</td>
              </tr>
              <tr>
                <td>Cell 2-1</td>
                <td>Cell 2-2</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

So how do I write the html that conforms to muicss way of displaying those 2 different look for the panel title?

The behavior of switching the two looks using checkbox is not important right now. I just want the look and feel to be correct first on two separate tables.

I really want to master muicss, so whatever i figure out here, I am okay to contribute back via the mui-cssjs.sketch file

[amorey]

@simkimsia Thanks for sharing the data table design - it looks pretty good.

If I understand the problem correctly, it looks like you're asking how you can use MUI to help you display the table title. In general you can use these MUI helper classes to display text: https://www.muicss.com/docs/v1/css-js/typography

I think you can use these for the two titles in the propeller table:

<div class="mui--text-headline">Propeller Data Table</div>
<div class="mui--text-subhead">1 row selected</div>

[simkimsia]

Thanks i will give this a try

[amorey]

Closing issue. Let me know if you still have questions about the MUI CSS helpers.