A regular table library, for async and virtual data models.

Related tags

Learning resource javascript table data-visualization jpmorganchase
Overview

regular-table

NPM Version Build Status

A Javascript library for the browser, regular-table exports a custom element named , which renders a regular HTML

to a sticky position within a scollable viewport. Only visible cells are rendered and queried from a natively async virtual data model, making regular-table ideal for enormous or remote data sets. Use it to build Data Grids, Spreadsheets, Pivot Tables, File Trees, or anytime you need:

  • Just a regular
.
  • Virtually rendered for high-performance.
  • async data model handles slow, remote, enormous, and/or distributed backends.
  • Easy to style, works with any regular CSS for
    • .
  • Small bundle size, no dependencies.

    • Examples
    two_billion_rows canvas_data_model perspective_headers
    two_billion_rows canvas_data_model perspective_headers
    minesweeper file_browser spreadsheet
    minesweeper file_browser spreadsheet

    Features
    row_mouse_selection column_mouse_selection area_mouse_selection
    row_mouse_selection column_mouse_selection area_mouse_selection
    row_stripes
    row_stripes

    Documentation

    What follows functions as a quick-start guide, and will explain the basics of the Virtual Data Models, Styling and Interaction APIs. Complete API docs and documented examples are also available.

    Installation

    Include via a CDN like JSDelivr:

    "> 
    <script src="https://cdn.jsdelivr.net/npm/regular-table">script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/regular-table/dist/css/material.css">

    Or, add to your project via yarn:

    yarn add regular-table

    ... then import into your asset bundle.

    import "regular-table";
import "regular-table/dist/css/material.css";

    Custom Element

    regular-table exports no symbols, only the Custom Element which is registered as a module import side-effect. Once loaded, can be used just like any other HTMLElement, using regular browser APIs:

    const regularTable = document.createElement("regular-table");
document.body.appendChild(regularTable);

    ... or from regular HTML:

    <regular-table>regular-table>

    ... or from your library of choice, as long as it supports regular HTML! Here's an example for React/JSX:

    const App = () => <regular-table></regular-table>;
ReactDOM.render(<App />, document.getElementById("root"));

    .setDataListener() Virtual Data Model

    Let's start with with a simple data model, a two dimensional Array. This one is very small at 3 columns x 6 rows, but even for very small data sets, regular-table won't read your entire dataset at once. Instead, we'll need to write a simple virtual data model to access DATA and COLUMN_NAMES indirectly.

    const DATA = [
    [0, 1, 2, 3, 4, 5],
    ["A", "B", "C", "D", "E", "F"],
    [true, false, true, false, true, false],
];

    When clipped by the scrollable viewport, you may end up with a

    of just a rectangular region of DATA, rather than the entire set. A simple viewport 2x2 may yield this
    :

    0 A
    1 B 
    {
    "num_rows": 26,
    "num_columns": 3,
    "data": [
        [0, 1],
        ["A", "B"]
    ]
}

    Here's a an implementation for this simple virtual data model, the function getDataSlice(). This function is called by your whenever it needs more data, with coordinate arguments, (x0, y0) to (x1, y1). Only this region is needed to render the viewport, so getDataSlice() returns this rectangular slice of DATA. For the window (0, 0) to (2, 2), getDataSlice() would generate an Object as above, containing the data slice, as well as the overall dimensions of DATA itself ( num_rows, num_columns), for sizing the scroll area. To render this virtual data model to a regular HTML

    , register this data model via the setDataListener() method:

    function getDataSlice(x0, y0, x1, y1) {
    return {
        num_rows: (num_rows = DATA[0].length),
        num_columns: DATA.length,
        data: DATA.slice(x0, x1).map((col) => col.slice(y0, y1)),
    };
}

regularTable.setDataListener(getDataSlice);

    This will render your regular HTML

    ! Your DOM will look something like this, depending on the size of your viewport. Notice there are fewer rows and columns in the resulting HTML, e.g. the column Column 3 (boolean) - as you scroll, more data will be fetched from getDataSlice(), and parts of the
    will redrawn or extended as needed.

    <regular-table>

    <table>
        <tbody>
            <tr>
                <td>0td>
                <td>Atd>
            tr>
            <tr>
                <td>1td>
                <td>Btd>
            tr>
        tbody>
    table>

regular-table>

    virtual_mode Option

    regular-table supports four modes of virtual scrolling, which can be configured via the virtual_mode optional argument. Note that using a virtual_mode other than the default "both" will render the entire

    along the non-virtual axis(es), and may cause rendering performance degradation.

    • "both" (default) virtualizes scrolling on both axes.
    • "vertical" only virtualizes vertical (y) scrolling.
    • "horizontal" only virtualizes horizontal (x) scrolling.
    • "none" disable all scroll virtualization.
    table.setDataListener(listener, {virtual_mode: "vertical"})

    Column and Row Headers

    regular-table can also generate Hierarchial Row and Column Headers, using

    ), or Row Headers (the first children of each tbody tr), via the column_headers and row_headers properties (respectively) of your data model's Response object. This can be renderered with column_headers, a two dimensional Array which must be of length x1 - x0, one Array for every column in your data window.

    elements which layout in a fixed position within the virtual table. It can generate Column Headers (within the
    Column 1 (number) Column 2 (string)
    0 A
    1 B 
    {
    "num_rows": 26,
    "num_columns": 3,
    "data": [
        [0, 1],
        ["A", "B"]
    ],
    "column_headers": [
        ["Column 1 (number)"],
        ["Column 2 (string)"]
    ]
}

    Hierarchial/Group Headers

    regular-table supports multiple of , and also uses colspan and rowspan to merge simple consecutive names, which allows description of simple Row and Column Group Hierarchies such as this:

    Colgroup 1
    Column 1 Column 2
    Rowgroup 1 Row 1 0 A
    Row 2 1 B 
    {
    "num_rows": 26,
    "num_columns": 3,
    "data": [
        [0, 1],
        ["A", "B"]
    ],
    "row_headers": [
        ["Rowgroup 1", "Row 1"],
        ["Rowgroup 1", "Row 2"]
    ],
    "column_headers": [
        ["Colgroup 1", "Column 1"],
        ["Colgroup 1", "Column 2"]
    ]
}

    Note that in the rendered HTML, for these Row and Column Array, repeated elements in a sequence will be automatically merged via rowspan and colspan attributes. In this example, e.g. "Rowgroup 1" will only output to one node in the resulting

    .

    metadata Data-Aware Styling

    A dataListener may also optionally provide a metadata field in its response, a two dimensional Array of the same dimensions as data. The values in this field will accompany the metadata records returned by regular-table's getMeta() method (as described in the next section).

    {
    "num_rows": 26,
    "num_columns": 3,
    "data": [
        [-1, 1],
        ["A", "B"]
    ],
    "metadata": [
        ["pos", "neg"],
        ["green", "red"]
    ],
}

    async Data Models

    With an async data model, it's easy to serve getDataSlice() remotely from node.js or re-implement the JSON response protocol in any language. Just return a Promise() from, or use an async function as an argument to, setDataListener(). Your won't render until the Promise is resolved, nor will it call your data model function again until the current call is resolved or rejected. The following async example uses a Web Worker, but the same principle applies to Web Sockets, readFile() or any other asynchronous source. Returning a Promise blocks rendering until the Web Worker replies:

    { callback(event.data); }); regularTable.setDataListener((...viewport) => { return new Promise(function (resolve) { callback = resolve; worker.postMessage(viewport); }); });"> 
    // Browser

let callback;

worker.addEventListener("message", (event) => {
    callback(event.data);
});

regularTable.setDataListener((...viewport) => {
    return new Promise(function (resolve) {
        callback = resolve;
        worker.postMessage(viewport);
    });
});
    { const response = await getDataSlice.apply(null, event.data); self.postMessage(response); });"> 
    // Web Worker

self.addEventListener("message", async (event) => {
    const response = await getDataSlice.apply(null, event.data);
    self.postMessage(response);
});

    .addStyleListener() and getMeta() Styling

    regular-table can be styled trivially with just regular CSS for

    .

    // Zebra striping!
regular-table tr:nth-child(even) td {
    background: rgba(0,0,0,0.2);
}

    However, CSS alone cannot select on properties of your data - if you scroll this example, the 2nd row will always be the striped one. Some other data-reliant style examples include:

    • Styling a specific column in the virtual data set, as
    may represent a different column based on horizontal scroll position.
  • Styling cells by value, +/-, heatmaps, categories, etc.
  • Styling cells based on data within-or-outside of the virtual viewport, grouping depth, grouping categories, etc.

    • To make CSS that is virtual-data-model-aware, you'll need to use addStyleListener(), which invokes a callback whenever the

    is re-rendered, such as through API invocations of draw() and user-initiated events such as scrolling. Within this optionally async callback, you can select
    , , etc. elements via regular DOM API methods like querySelectorAll().

    // Only select row_headers!
table.addStyleListener(() => {
    for (const th of table.querySelectorAll("tbody th")) {
        style_th(th);
    }
});

    Once you've selected the

    		and you want to paint, getMeta() will return a MetaData record of information about the HTMLElement's virtual position. This example uses meta.x, the position in data-space, to make virtual-scroll-aware zebra striping.

    function style_th(th) {
    const meta = table.getMeta(th);
    th.classList.toggle("zebra-striped", meta.x % 2 === 0);
}
    .zebra-striped {
    background-color: rgba(0,0,0,0.2);
}

    .invalidate()

    To prevent DOM renders, conserves DOM calls like offsetWidth to an internal cache. When a

    		or 's width is modified within a callback to .addStyleListener(), you must indicate to that its dimensions have changed in order to invalidate this cache, or you may not end up with enough rendered columns to fill the screen!

    A call to invalidate() that does not need new columns only imparts a small runtime overhead to re-calculate virtual width per async draw iteration, but should be used conservatively if possible. Calling invalidate() outside of a callback to .addStyleListener() will throw an Error.

    table.addStyleListener(() => {
    for (const th of table.querySelectorAll("tbody th")) {
        th.style.maxWidth = "20px";
    }
    table.invalidate();
});

    .addEventListener() Interaction

    is a normal HTMLElement! Use the regular-table API in concert with regular DOM API methods that work on other HTMLElement to create advanced functionality, such as this example of virtual row select:

    { const meta = table.getMeta(event.target); if (meta && meta.y >= 0) { selected_rows.push(meta.y); table.draw(); } }); table.addStyleListener(() => { for (const td of table.querySelectorAll("td")) { const meta = table.getMeta(td); td.classList.toggle("row-selected", selected_rows.includes(meta.y)); } });"> 
    const selected_rows = [];

table.addEventListener("mousedown", (event) => {
    const meta = table.getMeta(event.target);
    if (meta && meta.y >= 0) {
        selected_rows.push(meta.y);
        table.draw();
    }
});

table.addStyleListener(() => {
    for (const td of table.querySelectorAll("td")) {
        const meta = table.getMeta(td);
        td.classList.toggle("row-selected", selected_rows.includes(meta.y));
    }
});

    Advanced examples can be found in the examples directory, and in the bl.ocks example gallery.

    Scrolling

    Because of the structure of the HTML

    element,
    elements must be aligned with their respective row/column, which causes default to only be able to scroll in increments of a cell, which can be irregular when column data is of different lengths. Optionally, you may implement sub-cell scrolling in CSS via slotted CSS variables. The provided material.css theme does exactly this, or you can implement this in any custom style by importing the sub_cell_scrollling.css stylesheet explicitly:

    "> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/regular-table/dist/css/sub-cell-scrolling.css">

    Pivots, Filters, Sorts, and Column Expressions with perspective

    regular-table is natively compatible with perspective, a WebAssembly streaming visualization engine. By using a persective.Table as a Virtual Data Nodel, it becomes simple to achieve user-driven row and column pivots, filters, sorts, and column expressions, as well as charts and persistent layouts, from high-frequency updating data.

    Development

    First install dev_dependencies:

    yarn

    Build the library

    yarn build

    Run the test suite

    yarn test

    Start the example server at http://localhost:8080/examples/

    yarn start

    Open Source @ JPMorgan Chase 2022

    Comments
    • Adding a file_browser.html example

      Adding a file_browser.html example

      Adds an example of regular-table being used to render a filebrowser, complete with a tree column on the left. Still needs a bunch of work to be functional, and then a whole bunch of styling work beyond that. I'd also like to figure out how to add some "sort on header click" behavior.

      I want to explore adding multiselect and drag-n-drop behavior to this example filebrowser, but those are complex and I may end up saving them for their own individual examples.

      enhancement 
      opened by telamonian 7
    • Replace unsupported `className` prop with `class` in TypeScript typings

      Replace unsupported `className` prop with `class` in TypeScript typings

      See https://reactjs.org/docs/web-components.html#using-web-components-in-react

      Although this change can be viewed as breaking, I wouldn't personally call it such - if you pass className, then the class doesn't get applied. This is a bug fix in my opinion, and it allows consumers to correctly pass class prop.

      opened by NMinhNguyen 6
    • replaces `http-server` with a live-reloading rollup dev server

      replaces `http-server` with a live-reloading rollup dev server

      This PR:

      • cleans up the build and watch cmds in package.json
      • replaces all uses of http-server with a dev server that runs as part of a rollup build
      • the rollup watch build will now also launch a dev server. The dev server serves the examples, which will auto-reload on changes to anything in src/ (including the .less files)
      • the rollup watch build is now a "dev" build. The only real change is that it now skips the terser plugin, for easier debugging
      enhancement developement 
      opened by telamonian 4
    • wrap any plain text column headers in a `<span>`

      wrap any plain text column headers in a ``

      As discussed with @texodus, this PR changes the creation of column header nodes such that any text is wrapped up in a <span> element before getting added. As opposed to now, where any text is just included as a raw text node.

      opened by telamonian 3
    • How do I add a regular-table to a flex layout without breaking it?

      How do I add a regular-table to a flex layout without breaking it?

      Support Question

      I'm creating a panel element that has a few widgets at the top and then a <regular-table> on the bottom. I want to use a flex-column layout for the panel, like so:

      image

      Following suggestions online, I tried setting the CSS to the following:

      .myapp-panel {
  display: flex;
  flex-flow: column;
}

.myapp-breadcrumbs {
  height: 16px;
  width: 100%;
}

.myapp-filter {
  height: 16px;
  width: 100%;
}

regular-table.myapp-regular-table {
  flex: 1;
}

      and then I ran into trouble. regular-table ships a stylesheet in its shadow root that applies position: absolute to its :host (ie the regular-table element itself). position: absolute does not seem to be compatible with having display: flex in the parent panel; these styles together fling the regular-element out of the visible area of the document.

      Next I tried changing the position styling of the regular-table by adding more CSS:

      regular-table.myapp-regular-table {
  flex: 1;
  position: relative;
}

      However, changing the position: absolute styling seems to completely break regular-table; on initial render it only displays one or two rows, and it seems to break in stranger ways as well:

      image

      (where the heck does that nub come from?)

      Any suggestions on how I can achieve my desired layout (or reasonable facsimile) without breaking regular-table would be greatly appreciated.

      For more context, here's a qualitative description of what I'm trying to achieve in terms of layout:

      • The .myapp-panel element serves as the outer container for the other elements. Its height and width should each be able to grow to fill available space. Ideally, either of height/width should alternatively be fixed without breaking any child element behavior and/or CSS
      • The .myapp-breadcrumbs element should have a fixed height, and it's width should grow to fit its parent's width
      • The .myapp-filter elements should be the same (fixed height, grow width)
      • The .myapp-regular-table element should grow in height to fill the remainder of the panel, and its width should be set by the usual regular-table autosizing logic, up to the width of the containing panel
      question documentation 
      opened by telamonian 3
    • Prefetching rows from remote source

      Prefetching rows from remote source

      Is there a way to prefetch rows from a remote source? It seems that setting setDataListener gets called whenever the viewport changes. When scrolling this generates a lot of calls to the server. What is the best way to implement a caching mechanism to load data in pages (e.g. load 100 rows instead of just the 25 of the viewport) and have the table generate a call only when needed, or when approaching the edge of the prefetched data?

      question 
      opened by zalmane 3
    • Adds typescript .d.ts declaration file for RegularTableElement

      Adds typescript .d.ts declaration file for RegularTableElement

      • [x] Adds dist/esm to the build. This includes .d.ts files autogenerated from the existing jsdoc comments in the javascript sources (using the standard tsc typescript compiler)
      • [x] fixup/add missing jsdoc comments
      • [x] add manually curated index.d.ts file to project root
      opened by telamonian 3
    • A simple way to specify a generic tree column

      A simple way to specify a generic tree column

      I've been messing around with the tree functionality in regular-table. The existing tree support is based on row_pivots, which is cumbersome for specifying a generic tree whose complete structure you don't necessarily know in advance. I think(?) there may also be at least some trees that you can't specify in terms of row pivots.

      So far my best idea is that if a row can be expanded, the user's data model should add a / to the end of its final path element, and also supply expand and collapse functions (as per _on_toggle).

      I'm working on a branch right now to implement the above, but am absolutely open to more clever suggestions.

      in progress enhancement 
      opened by telamonian 3
    • Update typings for 0.4.0; add 99% automated typescript declarations build

      Update typings for 0.4.0; add 99% automated typescript declarations build

      This PR makes significant fixes to the typings, as well as adding a mostly automated build for (re)generating the contents of the index.d.ts typescript declaration file:

      • Typing fixes:
        • [x] MetaData.value: was object, now string | HTMLElement
        • [x] various types associated with MetaData.value updated to match with new narrower typing:
        • [x] added typing support for passing options to RegularTableElement.setDataListener
        • [x] replace usage of jsdoc @example tag with plain Example:, to ensure that full doc strings get added to index.d.ts
      • Automated build:
        • [x] added config for declarations-only typescript build to decularationsconfig.json
        • [x] added commands for declarations build to package.json
        • [x] add clear step-by-step instructions covering the automated declarations build as well as any manual steps still needed
      enhancement 
      opened by telamonian 2
    • Problems when increasing column size by dragging

      Problems when increasing column size by dragging

      Bug Report

      Steps to Reproduce:

      1. Open one of the examples
      2. Click to drag one of the column header resizers
      3. Drag resizer to the right (try to make column larger)

      Expected Result:

      Smoothly animated column resize

      Actual Result:

      Many console errors of the form:

      TypeError: Cannot read property 'style' of undefined
    at HTMLElement._on_resize_column_move (events.js:178)
    at async HTMLElement.i.value (utils.js:101)

      In some (most?) cases the column resize will still succeed, but the errors seem to prevent the animation/visual feedback from working correctly.

      Environment:

      osx 10.14, chromium 76

      Additional Context:

      The issue seems to be the recent removal of vcidx from th metadata. One possible resolution would be to remove the second "optimized" branch from this conditional:

      https://github.com/jpmorganchase/regular-table/blob/f60a572904ee753624f9516182ff23a6562d0562/src/js/events.js#L168-L181

      bug 
      opened by telamonian 2
    • Fixes regular-table in firefox; fixups for scrollbar styling

      Fixes regular-table in firefox; fixups for scrollbar styling

      Fixes #26

      Some of our styling was webkit-only, which was breaking our examples etc in firefox:

      https://github.com/jpmorganchase/regular-table/blob/f60a572904ee753624f9516182ff23a6562d0562/src/less/container.less#L11-L19

      Firefox doesn't know what to do with overflow: overlay. Although a regular-table was still scrollable in firefox, the actual "scroll" events were not being emitted, and so the table was never updated/redrawn.

      This PR:

      • replaces overflow: overlay with overflow: auto in the .less
      • recreates the same behavior as overflow: overlay on the javascript side
      • fixes up the rest of the styling to match these changes
      • adds styling for scrollbars in firefox (roughly) equivalent to the existing webkit scrollbar styling

      Visually, the only change this PR makes in chrome is that each scrollbar thumb is now centered in its track.

      before this PR:

      image

      after this PR:

      image
      opened by telamonian 2
    • Update to License, Notice and Readme files

      Update to License, Notice and Readme files

      • JP Morgan Chase should be on the LICENSE and NOTICE files
      • FINOS "active" and OpenSSF "passing" badges
      • Contributing + License sections added to readme
      opened by TheJuanAndOnly99 2
    • perspective_headers example

      perspective_headers example

      Bug Report

      Steps to Reproduce:

      Open the perspective_headers exemple https://bl.ocks.org/texodus/d92520387cb7aa5752dad7286cbb89c9 image

      Expected Result:

      The exemple working correctly

      Actual Result:

      There some errors at this exemple, so it shows blank

      opened by VitorKawao 0
    • Horizontal scroll returns one step when the next column is large

      Horizontal scroll returns one step when the next column is large

      Bug Report

      Steps to Reproduce:

      1. Create a spreadsheet.
      2. Create a column with a large string inside that will not be displayed in the first frame.
      3. Scroll slowly to it. horizontal-scroll

      Expected Result:

      Horizontal scroll moves smoothly.

      Actual Result:

      Horizontal scroll returns one step.

      bug 
      opened by paul-maki 0
    • On a pivoted table, the group tree column doesn't remember resizes

      On a pivoted table, the group tree column doesn't remember resizes

      Bug Report

      Steps to Reproduce:

      1. Go to the perspective homepage
      2. Change the perspective viewer plugin to the datagrid
      3. Resize the group tree column (first column)
      4. Click on any of the other column headers to sort

      Expected Result:

      The column resize to be maintained after the sort

      Actual Result:

      The column resize is lost after the sort

      opened by zemeolotu 0
    • using {virtual_mode:

      using {virtual_mode: "vertical"} and "none" causes containing web page to fail to load

      Bug Report

      Steps to Reproduce:

      I'm trying out the new virtual_mode option for setDataListener:

      https://github.com/jpmorganchase/regular-table/blob/6dbee4ffe1b3c1342ae3903a39456aa9d5131cda/src/js/index.js#L272-L279

      The both and horizontal options seem to work fine, but trying to use either vertical or none causes the webpage containing the <regular-table> to fail to load.

      Expected Result:

      vertical and none functioning as described in #125

      Actual Result:

      image

      Before that error pops up, the page will try to load for about 30 sec (while displaying only a white screen, with no loaded sources visible in devtools).

      Environment:

      [email protected]

      Additional Context:

      This bug is happening in a regular table included in my <tree-finder-panel> element

      bug 
      opened by telamonian 5
    • Simple repro of height bug when trying to get a `<regular-table>` to participate in a flex layout

      Simple repro of height bug when trying to get a `` to participate in a flex layout

      The repro

      I came up with a simple repro of the issue I was having in #115:

      https://bl.ocks.org/telamonian/00c777c2194e11f43bd7ade294095aa1

      The "bug"

      The <regular-table> element renders as zero height.

      Description

      In the above example, there's an #outer flex box that contains two children:

      • a simple <span> with some text content
      • a <regular-table> with ~15,000 data rows

      In order to get a <regular-table> element to participate in a flex layout, you have to change it's position (or wrap it in a <div> and change the position of that) to something other than absolute (I think maybe it has to be position: relative, not 100% sure). As soon as you change position, though, the <regular-table> disappears. The only resolution seems to be to set an explicit height in px on at least one of the parent elements of the <regular-table>. In theory, the height of the <regular-table> should be taken care of by the flex layout.

      Is this a bug or not? If it is a bug, how do we fix it?

      My sense is that there's a tweak to some virtual size calculation somewhere in scroll_body.js that will allow for height to be controlled by the flex layout

      question 
      opened by telamonian 0
    Owner
    J.P. Morgan Chase & Co.
    Welcome to the open source project repositories for JPMorgan Chase
    J.P. Morgan Chase & Co.
    GitHub
    A workshop about JavaScript iteration protocols: iterator, iterable, async iterator, async iterable

    JavaScript Iteration protocol workshop A workshop about JavaScript iteration protocols: iterator, iterable, async iterator, async iterable by @loige.

    Luciano Mammino 96 Dec 20, 2022
    Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

    JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

    Svante Jonsson IT-Högskolan 3 May 18, 2022
    Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

    Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

    null 4 May 3, 2022
    Kurs-repo för kursen Webbserver och Databaser

    Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

    null 14 Jan 3, 2023
    🧙 Mage is an open-source data management platform that helps you clean data and prepare it for training AI/ML models.

    Intro Mage is an open-source data management platform that helps you clean data and prepare it for training AI/ML models. What does this do? The curre

    Mage 2.5k Jan 4, 2023
    A JavaScript / WebAssembly library for generating regular expressions from user-provided test cases

    1. What does this library do? grex is a library that is meant to simplify the often complicated and tedious task of creating regular expressions. It d

    Peter M. Stahl 164 Dec 30, 2022
    A table component for your Mantine data-rich applications, supporting asynchronous data loading, column sorting, custom cell data rendering, row context menus, dark theme, and more.

    Mantine DataTable A "dark-theme aware" table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagina

    Ionut-Cristian Florescu 331 Jan 4, 2023
    Another table select prompt plugin of inquirer.js, with powerful table render and filters.

    inquirer-table-select-prompt Table row selection prompt for Inquirer.js 动机 现有的 inquirer.js 没有支持表格行选中的命令行交互的插件. 社区内能查找到的，只有一个二维数组的 checkbox，eduardobouc

    锂电 3 Jan 7, 2023
    microregex is an open source and highly curated catalog of regular expression patterns. It offers programmers RegEx snippets that can be quickly exported into a variety of programming languages and distributed around teams.

    microregex - A catalog of RegEx patterns View Demo · Report Bug · Request Feature Loved the tool? Please consider contributing ✍️ to help it improve!

    Sunit Shirke 4 Oct 25, 2022
    A fun and functional way to write regular expressions (RegExp)

    funexp A fun and functional way to write regular expressions (RegExp). FunExp is a useful tool for larger projects that depends on RegExp to do heavy

    Matheus Giovani 2 Feb 7, 2022
    Regular expression for Character classes

    Regular expression for Character classes

    言葉 7 Aug 21, 2022
    This package is for developers to be able to easily integrate bad word checking into their projects.\r This package can return bad words in array or regular expression (regex) form.

    Vietnamese Bad Words This package is for developers to be able to easily integrate bad word checking into their projects. This package can return bad

    Nguyễn Quang Sáng 8 Nov 3, 2022
    This branch is created to make receive and send data to api using async and await methods

    Microverse-Leader-Board Project from module 2 week 4 This branch is created to make receive and send data to api using async and await methods Screens

    Akshitha Reddy 6 Apr 22, 2022
    Fnon is a client-side JavaScript library for models, loading indicators, notifications, and alerts which makes your web projects much better.

    ???????? Fnon is the name of my late mother, It's an Arabic word which means Art, I created this library in honor of her name. Fnon is a client-side J

    Adel N Al-Awdy 5 Sep 11, 2022
    An authorization library that supports access control models like ACL, RBAC, ABAC in modern JavaScript platforms

    Casbin-Core ?? Looking for an open-source identity and access management solution like Okta, Auth0, Keycloak ? Learn more about: Casdoor News: still w

    Casbin 6 Oct 20, 2022
    Browser-compatible JS library for running language models

    Huggingface Transformers Running in the Browser This library enables you to run huggingface transformer models directly in the browser. It accomplishe

    Frank A. Krueger 50 Jan 8, 2023
    Simple modern JavaScript ES6 library that fetches JSON data into an HTML table which displays nicely within a Bootstrap 4 Card.

    Simple modern JavaScript ES6 library that fetches JSON data into an HTML table which displays nicely within a Bootstrap 4 Card. Uses simplenotsimpler/modern-table library.

    SimpleNotSimpler 6 Feb 17, 2022
    A tool to modify onnx models in a visualization fashion, based on Netron and flask.

    English | 简体中文 Introduction To edit an ONNX model, One common way is to visualize the model graph, and edit it using ONNX Python API. This works fine.

    Zhang Ge 413 Jan 4, 2023
    This is a demo store built with Medusa. It is a fully functional e-commerce store that you can use to test out Medusa and we have implemented 3D swag store functionality. Swags are 3D models that can be viewed by the customer before they purchase them.

    Hacktoberfest - Medusa's 3D Swag Store This is a demo store built with Medusa. It is a fully functional e-commerce store that you can use to test out

    Manoj Kumar 4 Nov 21, 2022

    2022.JsRepos