GithubHelp home page GithubHelp logo

jerrylow / basictable Goto Github PK

View Code? Open in Web Editor NEW
127.0 8.0 56.0 810 KB

Basic Table jQuery or Vanilla JS plugin for simple responsive tables.

License: MIT License

CSS 7.83% JavaScript 92.17%
breakpoint jquery jquery-plugin table vanilla-js vanillajs

basictable's Introduction

Basic Table

A simple lightweight jQuery or Vanilla JS responsive table library. A library to setup tables for a basic responsive table stucture. Utilizing the techniques of http://css-tricks.com/responsive-data-tables/. This is to assists in those situations where the users don't necessarily have access or capacity to modify HTML such as input from a WYSIWYG.

View Demo (jQuery)

View Demo (Vanilla JS)

jQuery User Notes for 2.0.0

The jQuery version remains the same as 1.0.0. While the source remains unchanged there are three things to note when upgrading:

  • Distribution files are no longer in the root directory, they've moved to /dist/js/jquery.basictable.js and /dist/js/jquery.basictable.min.js,
  • The non-minified version is now a beautified version rather than the source file, and
  • The minified version is no longer compressed with uglifyjs, it's compressed using Tercer.

These changes should have no impact on the way it functions in comparison with 1.x.

Getting Started

jQuery

Include the CSS and jQuery library in the <head> of your page.

<link rel="stylesheet" type="text/css" href="basictable.min.css" />

<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.basictable.min.js"></script>

Initiate on any table(s) with:

$('table').basictable();

Vanilla JS

Include the CSS and basictable library in the <head> of your page.

<link rel="stylesheet" type="text/css" href="basictable.min.css" />

<script type="text/javascript" src="basictable.min.js"></script>

Initiate on any table(s) with:

new basictable('table');

Options

Options are applicable to both the jQuery and Vanilla JS.

breakpoint

integer default: null

Define the breakpoint (viewport's width) when the table will engage in responsive mode. If the containerBreakpoint is null (which is the default) the value will be 568px.

containerBreakpoint

integer default: null

Define the breakpoint of the table's container when the table will engage in responsive mode.

contentWrap

boolean default: true

Wraps the original content within the cell in a span with class .bt-content, to help with CSS selection.

forceResponsive

boolean default: true

The library will always force the table into responsive mode once the breakpoint is met. If this is set to false the table will only change mode when the table itself is larger than its immediate parent's inner width.

noResize

boolean default: false

Disable Basic Table's JS resize. The table won't engage in responsive mode unless media query or another resize bind outside of Basic Table is defined.

tableWrap

boolean default: false

When the library is initialize create a div wrapper around the table with class .bt-wrapper. This wrapper will toggle an active class when the table mode changes.

showEmptyCells

boolean default: false

When true, empty cells will be shown.

header

boolean default: true

Set to false if table does not have a header row. Table will just be responsive with table body and optional footer.

Methods (jQuery)

start

Engage the table in responsive mode. This method can only run after the table has been initialized.

$('table').basictable('start');

stop

Toggle the table back to normal mode, removing the responsive look. This does not destory the Basic Table data and wrappers. The table will still work once the breakpoint is met.

$('table').basictable('stop');

destroy

Destroy the the responsive bind on the table. This will remove all data and generated wrappers from the table, returning it to its initial state.

$('table').basictable('destroy');

restart

Run destroy, setup then check without resetting the table data. Run this if the table dynamically updates.

$('table').basictable('restart');

Methods (Vanilla JS)

Methods demonstrated assuming you've defined the object as table.

const table = new basictable('.table');

start

Engage the table in responsive mode. This method can only run after the table has been initialized.

table.start();

stop

Toggle the table back to normal mode, removing the responsive look. This does not destory the Basic Table data and wrappers. The table will still work once the breakpoint is met.

table.stop();

destroy

Destroy the the responsive bind on the table. This will remove all data and generated wrappers from the table, returning it to its initial state.

table.destroy();

restart

Run destroy, setup then check without resetting the table data. Run this if the table dynamically updates.

table.restart();

basictable's People

Contributors

cr0ybot avatar dependabot[bot] avatar hankszeto avatar jerrylow avatar kyleladd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

basictable's Issues

feature_request(dependencies): vanilla JavaScript or Cash instead of JQuery

1. Summary

It would be nice, if would be possible to use Basic Table without JQuery.

  1. Possible it would be nice to have Basic Table written in a pure JS.
  2. Or make the plugin Cash-compatible.

2. Argumentation

2.1. Common cause

JQuery size, web performance.

2.2. Details

JQuery is a large library that can decrease a web performance. For example, see the article “You might not need jQuery: A 2018 Performance case study”. I don’t use JQuery on my site, and I don’t think having as much dependency as JQuery solely for responsive tables is the best solution.

3. About Cash

3.1. Shortly

From Cash GitHub Readme:

Cash is an absurdly small jQuery alternative for modern browsers (IE11+) that provides jQuery-style syntax for manipulating the DOM.

3.2. Details

I copied it from cash GitHub Readme:

Size Cash Zepto 1.2.0 jQuery Slim 3.4.1
Unminified 36.5 KB 58.7 KB 227 KB
Minified 16 KB 26 KB 71 KB
Minified & Gzipped 6 KB 9.8 KB 24.4 KB

A 76.6% gain in size reduction compared to jQuery. If you need a smaller bundle, we support partial builds too.

Features Cash Zepto 1.2.0 jQuery Slim 3.4.1
Supports Older Browsers
Supports Modern Browsers
Actively Maintained
Namespaced Events
Typed Codebase ✔ (TypeScript)
TypeScript Types ✔ (generated from code) ⚠️ (via DefinitelyTyped) ⚠️ (via DefinitelyTyped)
Partial Builds ✔ (can exclude individual methods) ⚠️ (can exclude whole modules) ⚠️ (can exclude whole modules)

4. Additional links

  1. Cash documentation
  2. Migration from jQuery to Cash guide

Thanks.

Issue with dynamic table

When a new table row gets added dynamically via AJAX/KnockoutJS, the table headers of the new row are blank in responsive mode. I tried basictable('destroy') and running basictable again after the new row gets added dynamically, but the table headers dont show up in responsive mode.

Issue with AJAX

I am trying this code, But it seems it is not working for the tables loaded with AJAX:

$(document).on('ready ajaxSuccess', function() {
	$('table').basictable({
		forceResponsive: false
	});
});

feature_request(breakpoints): orientation breakpoint

1. Summary

It would be nice, if would be possible to have this behavior:

If page orientation is landscape:

    table will look normal (possibly use @media screen and (orientation landscape) CSS)

else orientation is portrait:

    table will look stacked (possibly use @media screen and (orientation portrait) CSS)

2. Argumentation

2.1. Non-use specific px breakpoints

In my site, I don’t use specific px breakpoints. I use media queries for landscape and portrait orientation.

Orientation

For landscape orientation, I use media query:

@media screen and (orientation landscape)

For portrait:

@media screen and (orientation portrait)

2.2. Argumentation of non-use specific px breakpoints

  1. In my experience, landscape and portrait orientation media queries are sufficient for most cases of responsive design. Perhaps it will be enough for Basic Table usage too.
  2. I don’t like the logic of specific px breakpoints. A breakpoint px value that works well in one case may not work so well in another case, and a different breakpoint value will be more successful.
  3. In process of time, device sizes are changing, and web developers have to change px breakpoints.
  4. Dealing with specific px breakpoints can be time-consuming.

3. Example of desired behavior

If user initialize Basic Table use this code:

new basictable('table', breakpoint: 'orientation')

Basic Table will have the behavior as in my Summary.

Thanks.

First column header throws error

When the first column of the table is set as a header it throws this error:
Uncaught TypeError: can't access property "text", a[e][t] is undefined

Example table below:
<table class="ms-rteTable-5" width="100%" cellspacing="0"><tbody><tr class="ms-rteTableEvenRow-5"><th class="ms-rteTableFirstCol-5" rowspan="1" colspan="1" style="width:16.6667%;" data-th="​Wast​e (Tonnes): ​2011-12: ​2012-13: ​2013-14: ​2014-15"><span class="bt-content">​Wast​e (Tonnes)<br></span></th><td class="ms-rteTableOddCol-5" rowspan="1" colspan="1" style="width:16.6667%;">​Landfilled</td><td class="ms-rteTableEvenCol-5" rowspan="1" colspan="1" style="width:16.6667%;">​Recycled</td><td class="ms-rteTableOddCol-5" rowspan="1" colspan="1" style="width:16.6667%;">​Composted</td><td class="ms-rteTableEvenCol-5" rowspan="1" colspan="1" style="width:16.6667%;">​Generated</td><td class="ms-rteTableOddCol-5" rowspan="1" colspan="1" style="width:16.6667%;">​Recovered</td></tr><tr class="ms-rteTableOddRow-5"><th class="ms-rteTableFirstCol-5" rowspan="1" colspan="1">​2011-12</th><td class="ms-rteTableOddCol-5">​460,467</td><td class="ms-rteTableEvenCol-5">​159,633</td><td class="ms-rteTableOddCol-5">​41,298</td><td class="ms-rteTableEvenCol-5">​661,398</td><td class="ms-rteTableOddCol-5" rowspan="1" colspan="1">​30.4%</td></tr><tr class="ms-rteTableEvenRow-5"><th class="ms-rteTableFirstCol-5" rowspan="1" colspan="1">​2012-13</th><td class="ms-rteTableOddCol-5">​471,921</td><td class="ms-rteTableEvenCol-5">​182,193</td><td class="ms-rteTableOddCol-5">​41,748</td><td class="ms-rteTableEvenCol-5">​696,861</td><td class="ms-rteTableOddCol-5" rowspan="1" colspan="1">​32.3%</td></tr><tr class="ms-rteTableOddRow-5"><th class="ms-rteTableFirstCol-5" rowspan="1" colspan="1">​2013-14</th><td class="ms-rteTableOddCol-5">​398,603</td><td class="ms-rteTableEvenCol-5">​200​​,380<br></td><td class="ms-rteTableOddCol-5">​37,642</td><td class="ms-rteTableEvenCol-5">​636,625</td><td class="ms-rteTableOddCol-5" rowspan="1" colspan="1">​37.4%</td></tr><tr class="ms-rteTableEvenRow-5"><th class="ms-rteTableFirstCol-5" rowspan="1" colspan="1">​2014-15</th><td class="ms-rteTableOddCol-5" rowspan="1">​415,443</td><td class="ms-rteTableEvenCol-5" rowspan="1">​194,170</td><td class="ms-rteTableOddCol-5" rowspan="1">​39,350</td><td class="ms-rteTableEvenCol-5" rowspan="1">​648,964</td><td class="ms-rteTableOddCol-5" rowspan="1" colspan="1">​36.0%</td></tr></tbody></table>

Multiple tables

Hi Jerry,

Thanks for the great jQuery plugin. It works great with a single table. However, if I have more than one table on the page, selected using the 'table' element, the headings from the first table are being used on the second and third tables.

I'm calling basictable like this:

$('table').basictable({
breakpoint: 768,
});

Thanks.

Move no necessary dependencies to devDependencies

Hi there!
I struggled to add BasicTable to a major project managed by Composer due the package.json has some libraries dependencies used only for the development or during the building process.
It would be nice to moved them from dependencies to devDependencies so the library can be included having only the libraries really needed.
Thanks!

feature_request(thead): support tables without thead

1. Summary

It would be nice, if Basic Table will support tables without <thead> tag.

2. Validity of tables without thead

  1. According to HTML Living Standard as of 15.8.2022, <thead> tag is optional, not required for tables.
  2. Official W3C HTML validator and another validators — htmllint, htmlhint, linthtml — allow the use of tables without <thead>.

3. MCVE

3.1. Sources

Sources on Repl.it:

  1. index.html

    <!DOCTYPE html>
    <html>
    
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>Kira Basic Table without thead</title>
    	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basictable/dist/css/basictable.min.css">
    	<script src="https://cdn.jsdelivr.net/npm/basictable/dist/js/basictable.min.js" defer></script>
    	<script src="basictable.js" defer></script>
    </head>
    
    <body>
    	<table>
    		<tbody>
    			<tr>
    				<td>Kira Amazing</td>
    				<td>Kira Genius</td>
    				<td>Kira Goddess</td>
    			</tr>
    		</tbody>
    	</table>
    </body>
    
    </html>
  2. basictable.js

    new basictable('table');

3.2. Desired behavior

Stack the table as for tables with <thead>.

3.3. Current behavior

Demonstration on Repl.it.

Error in browser console:

Uncaught DOMException: Element.querySelectorAll: 'tr:first td' is not a valid selector basictable.min.js:4
   _setup https://cdn.jsdelivr.net/npm/basictable/dist/js/basictable.min.js:4
   forEach self-hosted:164
   _setup https://cdn.jsdelivr.net/npm/basictable/dist/js/basictable.min.js:4
   basictable https://cdn.jsdelivr.net/npm/basictable/dist/js/basictable.min.js:4
   <anonymous> https://kirabasictable-without-thead.kristinita.repl.co/basictable.js:1

Basic Table without thead error

3.4. Behavior with thead

If I add <thead> syntax to this table (sources on Repl.it):

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<title>Kira Basic Table without thead</title>
+	<title>Kira Basic Table with thead</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basictable/dist/css/basictable.min.css">
	<script src="https://cdn.jsdelivr.net/npm/basictable/dist/js/basictable.min.js" defer></script>
	<script src="basictable.js" defer></script>
</head>

<body>
+ 	<thead>
+		<tr>
+			<th>One</th>
+			<th>Two</th>
+			<th>Three</th>
+		</tr>
+	</thead>
	<table>
		<tbody>
			<tr>
				<td>Kira Amazing</td>
				<td>Kira Genius</td>
				<td>Kira Goddess</td>
			</tr>
		</tbody>
	</table>
</body>

</html>

Basic Table will successfully work, see Repl.it demonstration.

Thanks.

problem with datatable.

I found this plugin is very useful.
But when I use it in datatable it with miss thead data after search data.
12

`forceResponsive: false` always switches to stacked immediately

I'm using the non-jQuery version, and this part on line 133 always results in the table being measured as wider than it's parent (which in my case is the same width, no offset):

133      const tableSize = table.getBoundingClientRect().left + table.offsetWidth
134
135      if (tableSize > table.parentElement.offsetWidth) {

I don't believe the getBoundingClientRect().left is necessary in this calculation as it is getting the offset from the viewport, not the parent. If the intention is to check if the table is inset from the parent's bounds, table.offsetLeft would do the job.

table cell widths are kept

If a table has cell widths, say a ten column table has width on each cell of 10%, then this is still kept on the TD that is in the new table that Basictable creates. So this means that the content width is tiny with heaps of white space to the right of it. It would be best if Basictable could remove the width. It is also adding width: 6.5em which is messing with the display. If that is removed then it displays nicely.

Add thead > td support

Hi Jerry,

Great library.

With our CMS, it has a weird output for the tables as:

thead > tr > td

Do you think adding this line to your library would help make it more accessible?

      if (this.options.header) {
        let format = "";
        if (table.querySelectorAll("thead tr th").length) {
          format = "thead th";
        //Added Support
        } else if (table.querySelectorAll("thead tr td").length) {
           format = "thead td";
        } else if (table.querySelectorAll("tbody tr th").length) {
          format = "tbody tr th";
        } else if (table.querySelectorAll("th").length) {
          format = "tr:first th";
        } else {
          format = "tr:first td";
        }

Cheers,

Robert

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.