jerrylow / basictable Goto Github PK

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>

When I resize the browser the table changes to responsive mode but when I make it bigger after it changes to responsive mode, it stays in mobile format instead of becoming the table again.
Any leads to solve this?

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.

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.

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
	});
});

There are scenarios in which the table is throwing errors when resizing, more specifically at https://github.com/jerrylow/basictable/blob/master/jquery.basictable.js#L128.
This is due to the fact that you call check without the second parameter and later on you'll try to access .forceResponsive of undefined @ https://github.com/jerrylow/basictable/blob/master/jquery.basictable.js#L56

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

Plugin create a lot of span.bt-content inside td.
http://codepen.io/Zoxon/pen/JGEvQQ

I am having issue after adding rowspan attribute in <td> it not showing correct table heading(<th>). Any suggestion?

Here is a implementation please take look in mobile.

Thank you for your script. How can i use other titles for footer in table? For example for TOTAL VALUE ROW.

Price Number
123 1
222 2
333 4
TOTAL 678 7

In the demo should the property be tableWrap instead of tableWrapper?

Thanks.

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

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.

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.

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!

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

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.

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:

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

4. Additional links

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

Thanks.

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.

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.