Convert Table To List Using Jquery With Bootstrap

Table to List is to convert table to list using Jquery with Bootstrap. TabletoList is a responsive table plugin for jQuery that improves the readability of large tables in mobile view by converting them into lists when the viewport size is smaller than 767 pixels.

Create Amazing Web-Based Interactive Tables and Spreadsheets | jExcel

How to make use of it:

1. Insert the Table To List plugin after loading the jQuery JavaScript library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/tableToList.js"></script>

2. Call the plugin on the HTML table and specify the container during which the converted listing shows.

<div id="parent" class="container">
  <table class="table" id="myTable">
        <th scope="col">ID</th>
        <th scope="col">Task</th>
        <th scope="col">Progress</th>
        <th scope="col">Label</th>
        <th scope="row">1</th>
        <td>Update software</td>
        <th scope="row">2</th>
        <td>Clean database</td>
        <th scope="row">3</th>
        <td>Cron job running</td>
        <td>Not Bad</td>
$(function() {
  getList('#myTable', '#parent');

Convert Table To List In Mobile View, Table To List Plugin/Github, bootstrap table responsive in mobile view, responsive table columns to rows

See Demo And Download

Official Website(SaurabhAkolkar): Click Here

This superior jQuery/javascript plugin is developed by SaurabhAkolkar. For extra Advanced Usage, please go to the official website.

Related Posts


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…

Leave a Reply

Your email address will not be published. Required fields are marked *