TableFits

Responsive table into a responsive site. Or adaptive?
Easy.
Support colspan

• GitHub
• NPM

How to use

1. Install

npm install table-fits

2. Insert script (and styles)

<script src="js/table-fits.js"></script>
// Create own style or take ours — for test
<link rel="stylesheet" href="css/table-fits.css">

3. Your table

<table id="id-table">
    <thead>
        <tr>
            <td>Title 1</td>
            <td>Title 2</td>
            ...
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value 1</td>
            <td>Value 2</td>
            ...
        </tr>
        ...
    </tbody>
</table>

4. Magic

TableFits.make('#id-table');

5. Now, you have the responsive table

Small size — 9kb

How it works?

The script looks for a table and if the data in the table do not fit, the script will show them in cute look

The script will keep watch, if the structure of the table has changed or added a new line. And modify data in new blocks.

And callback on resize

TableFits.make('#id-table',{
    mainClass: 'table-fits',
    width: null,
    resize: true,
    watch: true
})

Option	Description
mainClass	Class name prefix, default: "table-fits" and all children has class "table-fits__..."
width	Sets the width of the table when it will converted into blocks, default null
resize	It's enable resize. If width of window (or parent container) will change, the event is triggered. Default true
watch	It's enable watch. If the structure of the table has changed or added a new line, the event is triggered. Default true

<table id="id-table" data-table-fits="no">
    ...
</table>

data-table-fits="no"

If you give the script all tables in a row, this option will be useful

<table id="id-table" data-table-fits-width="700">
    ...
</table>

data-table-fits-width="700"

Sets the width of the table when it will converted into blocks

Similar to the option

TableFits.make('#id-table',{
    width: 700
});

<table id="id-table">
    <thead>
        <tr>
            <td data-table-fits="title">Title 1</td>
            <td data-table-fits="title">Title 2</td>
            <td>Title 3</td>
            ...
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

data-table-fits="title"

The block is tag <tr> like <div>, and this block may have headings (titles). You need to add data-table-fits="title" in the right column in the tag <td> in the <thead> P.S. Supports multiple headers

data-table-fits-group="My group" or colspan="2..N"

You can combine columns using colspan or use the option data-table-fits-group="My group"

<table id="id-table">
    <thead>
        <tr>
            <td colspan="2">My Group</td>
            <td rowspan="2>Title 3</td>
            ...
        </tr>
        <tr>
            <td>Title 1</td>
            <td>Title 2</td>
            <td>Title 3</td>
            ...
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

<table id="id-table">
    <thead>
        <tr>
            <td data-table-fits-group="My Group">Title 1</td>
            <td data-table-fits-group="My Group">Title 2</td>
            <td>Title 3</td>
            ...
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>