ReActiveTable书签

Previously... React and tables. I've been meaning to improve a little on the table example built with React and a post by Steve was the final push. He shared his "ActiveTable" bookmarklet.

以前... React和table 。 我一直想在用React构建的表示例上做一些改进，最后由Steve发表。 他分享了他的“ ActiveTable”书签。

So, introducing a bookmarklet to make it easier to work with random HTML tables you come across...

因此，引入书签可以使您遇到的随机HTML表更容易使用...

ReActiveTable

ReActiveTable

Drag this link to your bookmarks, then find a page that has data in tables, for example this one. Click the bookmarklet and get a "pop" button atop of each table.

将此链接拖到您的书签中，然后找到一个表中包含数据的页面，例如this 。 单击小书签，并在每个表的顶部获得一个“弹出”按钮。

This button copies the table into a new overlay that lets you fiddle with the data in the table, namely...

此按钮将表格复制到新的叠加层中，使您可以摆弄表格中的数据，即...

Sort.

分类。

Filter as-you-type.

根据您的输入进行过滤。

Edit (double click a cell, type, Enter).

编辑(双击单元格，键入，按Enter)。

Download the data in CSV and JSON.

下载CSV和JSON中的数据。

Codez (Codez)

As usual, working with React was a pleasure. All you do is mess up with the data (just array methods: sort(), filter(), reduce()) and let React deal with the rendering stuff. All this functionality came at about 140 lines of code, available here.

像往常一样，与React合作很愉快。 您要做的只是弄乱数据(只是数组方法： sort() ， filter() ， reduce() )，然后让React处理渲染内容。 所有这些功能来自大约140行代码，可在此处找到。

The messier part is the bookmark part - working with the old school DOM (to extract data from random tables) and writing iframes and styles and scripts. It's right here.

信息接收器部分是书签部分-与旧式DOM(从随机表中提取数据)一起工作，并编写iframe，样式和脚本。 就在这里

覆盖(Overlay)

The idea about the overlay was inspired by Safari's Reader functionality (I recently looked at it).

关于覆盖层的想法是受Safari的Reader功能(我最近看过它)启发的。

Made me wonder if this thing - being able to play with tabular data found in pages - should be a standard feature built into browsers? Limited audience, maybe, but still convenient.

让我怀疑这件事-能够处理页面中找到的表格数据-是否应该成为浏览器内置的标准功能？ 听众虽然有限，但仍然很方便。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/reactivetable-bookmarklet/