Blezzoh

export default class WebWorker {
  constructor(worker) {
    const code = worker.toString();
    // converting the code to a blob
    const blob = new Blob(["(" + code + ")()"]);
    // url for the blob
    const blobUrl = URL.createObjectURL(blob)
    // worker set up
    this.worker = new Worker(blobUrl);
    return this.worker

Blezzoh

export default () => {
  // 'self' instead of 'window'
  self.addEventListener("message", e => {// eslint-disable-line no-restricted-globals
    // the above comment removes the eslint error for self
    
    if (!e) return;
    // the message passed is in e.data
    // we are passing it a json {numberOfUsers: <number>}
    var numberOfUsers = e.data.numberOfUsers;
  

Blezzoh

componentDidMount() {
   // instantiating the worker and adding a listener
   this.worker = new Webworker(worker);
   this.worker.addEventListener("message", e => {
     const { data } = e;
     this.setState({ data, isLoading: false });
   });
 }
 onClick = () => {
   // your event handler that will use a worker

Blezzoh

import React from "react";
import { Table } from "react-bootstrap";
import { useTable } from "react-table";
/**
 * As in the previous versions, a react-table accepts colums where at the core we have a field Header, and accessor
 * As in the previous versions, a react-table has data that consist of an array of JSONs
 */
const ReactTable = ({ columns, data }) => {
  // you can get the react table functions by using the hook useTable
  const {

Blezzoh

import React from "react";
import { Table } from "react-bootstrap";
import { useTable, useSortBy } from "react-table";
/**
 * As in the previous versions, any react table needs colums where at the core we have a field Header, and accessor
 * As in the previous versions, a react table has data that consist of an array of JSONs
 */
const ReactTable = ({ columns, data }) => {
  // you can get the react table functions by using the hook useStable
  const {

Blezzoh

 Date.prototype.isValid = function() {
  // An invalid date object returns NaN for getTime() and NaN is the only
  // object not strictly equal to itself.
  // eslint-disable-next-line
  return this.getTime() === this.getTime();
};

 const filterTypes = {
    year: (rows, id, filterValue) => {
      return rows.filter(row => {

Blezzoh

const ColumnFilter = ({ column: { filterValue, setFilter, filter } }) => {
  return (
    <input
      value={filterValue || ""}
      onChange={e => {
        setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
      }}
      placeholder={`Search ${filter ? filter : ""}...`}
    />
  );

Blezzoh

// any header without filter key will use the text filter function
// any header without Filter key will use the default filter component
const headers = [
  {
    Header: "First",
    accessor: "first"
  },
  {
    Header: "Last",
    accessor: "last"

Blezzoh

import React from "react";
import { Table } from "react-bootstrap";
import { useTable, useSortBy, useFilters } from "react-table";
import CustomInput from "./CustomInput";

window.Date.prototype.isValid = function() {
  // An invalid date object returns NaN for getTime() and NaN is the only
  // object not strictly equal to itself.
  // eslint-disable-next-line
  return this.getTime() === this.getTime();

Blezzoh

// value and onChange function
const GlobalFilter = ({ globalFilter, setGlobalFilter }) => {
  return (
    <input
      value={globalFilter || ""}
      onChange={e => {
        setGlobalFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
      }}
      placeholder={`Search All ...`}
    />