Convert table to card
see index.html for example
converts table to card when viewport is <= 425px
HTML Syntax
<table>
<!-- table headings -->
<thead>
<!-- use th tags for headings -->
<th></th>
</thead>
<!-- table body -->
<tbody>
<!-- use tr tags for rows -->
<tr>
<!-- use td tags for columns -->
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
Load from CDN
<script src="https://cdn.jsdelivr.net/gh/kushalcodes/konvert-table-to-card@main/konvert-table-to-card.min.js" type="text/javascript">
</script>
Usage
load this library then initialize using elements id or class
- id
TABLE_KONVERTER.init("#tableId");
- class
TABLE_KONVERTER.init(".tableClassName")
Note: Do not add id on table with initialized class name
css initializtion works by converting tables to have generated ids and use that id to TABLE_CONVERTER.init("#generatedId"), so do not add id to table which you want to convert, else it will throw error if so
Options
// options can be passed on second parameter as obj
const options = {
style: 'styleName', // described on Style Option below
type: 'typeName', // described on Type Option below
stickyHeader: { // make card title sticky
tableHeadingName: 'Action' // title or heading of table's name
}
};
TABLE_KONVERTER.init('#tableId', options);
Style Option
style the converted cards using prebuilt stylings
// styling names
> simple
> buddha
> casual
TABLE_KONVERTER.init("#tableId",{
style: 'buddha' // image below is how the buddha styling look like
});
Type Option
// type names
> autoAlign
// can also add type
TABLE_KONVERTER.init("#tableId",{
style: 'casual',
type: 'autoAlign'
});
// above init will look something like this
Dependencies
- Bootstrap
12 Aug 25, 2022
6 Feb 17, 2022
2 Oct 19, 2020
7 Jul 31, 2022
3 Jan 7, 2023
10 Dec 7, 2022
24 Jul 8, 2022
5 Sep 14, 2022
6 Sep 7, 2022