a table list component, responsive and minimalist

Usage no npm install needed!

<script type="module">
  import mnTableList from '';


npm version Dependency Status MIT Licence


Table list with a minimalist design

See the demo


npm install --save mn-table-list

And bundle dependencies and main files in dist/ with your preferred tool.


Just use the class .mn-table-list in a div, and inside of them, .mn-item.

<div class="mn-table-list">
  <div class="mn-item">
    <span>John Snow</span>

If you want a header, just use the tag header before items, each title need be h1, h2, ... h6, e.g.

<div class="mn-table-list">
  <!-- .mn-item's here -->

Grid system

To setup the flow of itens, we use another module, called mn-layout`, but you can use whatever grid system that you wish.

In example below, we use the classes .mn-layout-column, .mn-layout-sm-row and .flex to define a flex direction to content.

<div class="mn-table-list">
  <header class="mn-layout-column mn-layout-sm-row">
    <h3 class="flex">Name</h3>
    <h3 class="flex">Email</h3>

  <div class="mn-item mn-layout-column mn-layout-sm-row">
    <span class="flex">John Snow</span>
    <span class="flex"></span>