No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Svelte Bootstrap Table
 
Svelte Table - Bootstrap 4 & Material Design
   
Basic Example
   
# 
      First 
      Last 
      Handle
 
1 
      Mark 
      Otto 
      @mdo
 
2 
      Jacob 
      Thornton 
      @fat
 
3 
      Larry 
      the Bird 
      @twitter
 
 
<script>

  import {MDBTable, MDBTableBody, MDBTableHead} from "mdbsvelte";

</script>
<MDBTable>
  <MDBTableHead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </MDBTableHead>
  <MDBTableBody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </MDBTableBody>
</MDBTable>

 
Table head options
   
# 
      First 
      Last 
      Handle
 
1 
      Mark 
      Otto 
      @mdo
 
2 
      Jacob 
      Thornton 
      @fat
 
3 
      Larry 
      the Bird 
      @twitter
 
 
<script>

  import {MDBTable, MDBTableBody, MDBTableHead} from "mdbsvelte";

</script>
<MDBTable>
  <MDBTableHead color="primary-color" textWhite>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </MDBTableHead>
  <MDBTableBody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </MDBTableBody>
</MDBTable>

 
Striped rows
 
Use prop
striped to add zebra-striping to any table row within the
.
  
# 
      First 
      Last 
      Handle
 
1 
      Mark 
      Otto 
      @mdo
 
2 
      Jacob 
      Thornton 
      @fat
 
3 
      Larry 
      the Bird 
      @twitter
 
 
<script>
  import {MDBTable, MDBTableBody, MDBTableHead} from "mdbsvelte";
</script>
<MDBTable striped>
  <MDBTableHead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </MDBTableHead>
  <MDBTableBody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </MDBTableBody>
</MDBTable>

 
Bordered Table
 
Add prop
bordered for borders on all sides of the table and cells.
  
# 
      First 
      Last 
      Handle
 
1 
      Mark 
      Otto 
      @mdo
 
2 
      Jacob 
      Thornton 
      @fat
 
3 
      Larry 
      the Bird 
      @twitter
 
 
<script>

  import {MDBTable, MDBTableBody, MDBTableHead} from "mdbsvelte";

</script>
<MDBTable bordered>
  <MDBTableHead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </MDBTableHead>
  <MDBTableBody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </MDBTableBody>
</MDBTable>

 
Hoverable rows
 
Add prop hover to enable a hover state on table rows.
  
# 
      First 
      Last 
      Handle
 
1 
      Mark 
      Otto 
      @mdo
 
2 
      Jacob 
      Thornton 
      @fat
 
3 
      Larry 
      the Bird 
      @twitter
 
 
<script>

  import {MDBTable, MDBTableBody, MDBTableHead} from "mdbsvelte";

</script>
<MDBTable hover>
  <MDBTableHead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </MDBTableHead>
  <MDBTableBody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </MDBTableBody>
</MDBTable>

 
Small Table
 
Add prop small to make tables more compact by cutting cell padding in half.
  
# 
      First 
      Last 
      Handle
 
1 
      Mark 
      Otto 
      @mdo
 
2 
      Jacob 
      Thornton 
      @fat
 
3 
      Larry 
      the Bird 
      @twitter
 
 
<script>

  import {MDBTable, MDBTableBody, MDBTableHead} from "mdbsvelte";

</script>
<MDBTable small>
  <MDBTableHead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </MDBTableHead>
  <MDBTableBody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </MDBTableBody>
</MDBTable>

 
Captions
 
caption functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
  
List of users 
# 
      First 
      Last 
      Handle
 
1 
      Mark 
      Otto 
      @mdo
 
2 
      Jacob 
      Thornton 
      @fat
 
3 
      Larry 
      the Bird 
      @twitter
 
 
<script>
  import {MDBTable, MDBTableBody, MDBTableHead} from "mdbsvelte";
</script>
<MDBTable>
  <caption>List of users</caption>
  <MDBTableHead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </MDBTableHead>
  <MDBTableBody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </MDBTableBody>
</MDBTable>

 
Borderless
 
Add prop borderless for a table without borders.
  
# 
      First 
      Last 
      Handle
 
1 
      Mark 
      Otto 
      @mdo
 
2 
      Jacob 
      Thornton 
      @fat
 
3 
      Larry 
      the Bird 
      @twitter
 
 
<script>

  import {MDBTable, MDBTableBody, MDBTableHead} from "mdbsvelte";

</script>
<MDBTable borderless>
  <MDBTableHead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </MDBTableHead>
  <MDBTableBody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </MDBTableBody>
</MDBTable>

 
Responsive Table
 
Create responsive table by adding prop responsive to make them scroll horizontally on small
         devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
  
# 
      Heading 
      Heading 
      Heading 
      Heading 
      Heading 
      Heading 
      Heading 
      Heading 
      Heading
 
1 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell
 
2 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell
 
3 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell 
      Cell
 
 
<script>

  import {MDBTable, MDBTableBody, MDBTableHead} from "mdbsvelte";

</script>
<MDBTable responsive>
  <MDBTableHead>
    <tr>
      <th>#</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </MDBTableHead>
  <MDBTableBody>
    <tr>
      <td>1</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </MDBTableBody>
</MDBTable>

 
Table Data as props
   
idFirstLast
 
1Otto@mdo 
2Jacob@fat 
3Larrythe Bird 
 
 
<script>
  import {MDBTable, MDBTableBody, MDBTableHead} from "mdbsvelte";

  let button = `<button type="button" class="btn btn-indigo btn-sm m-0 waves-effect waves-light">Button</button>`;
  let columns = ["id", "First", "Last", button];
  let data = [
    {
      id: 1,
      first: button,
      last: "Otto",
      handle: "@mdo"
    }, {
      id: 2,
      first: "Jacob",
      last: button,
      handle: "@fat"
    },
    {
      id: 3,
      first: "Larry",
      last: "the Bird",
      handle: button
    }
  ]
</script>
<MDBTable>
  <MDBTableHead columns={columns}/>
  <MDBTableBody data={data}/>
</MDBTable>