Module for consumption in Netlify CMS

[hermanbanken]

I'm experimenting in enriching the Netlify CMS (if you don't know it, look it up, I think it is awesome 😄). It offers some basic Markdown editing, but no rich table editing support (just editableContent).

I saw your repo and it looked a lot like the awesome tables in Notion, so I thought I could give it a go. After finding the fork of @jeff-r-koyaltech I fiddled a bit more to be able to include it from NextJS & Netlify CMS, and to be able to read the updated state from it.

Notably, it was a hell of a lot of work to be able to include the styles. The only way to get the stylesheet to not interfere with the rest of the CMS was to use a shadowroot via https://github.com/Wildhoney/ReactShadow, but this didn't really play nice with the style system. So I opted for outputting a <style> element with the actual styles (which then get scoped by ReactShadow). There may be better ways, but I didn't get it working otherwise 😅

Proof:

Snippet required:

import root from 'react-shadow';
import React, { Ref } from "react";
import dynamic from 'next/dynamic';
import type { TableWrapper } from "editable-react-table";

export function TableWidget(opts: any = {}) {
  return {
    name: "table",
    controlComponent: TableControlComponent,
    previewComponent: TableControlComponent,
    ...opts,
  }
}

export const TableComponent = {
  id: 'table',
  label: 'Table',
  widget: 'table',
  type: 'table',
} as any;

enum DataTypes {
  NUMBER= 'number',
  TEXT= 'text',
  SELECT= 'select',
}

export const Table = dynamic<Parameters<typeof TableWrapper>[0]>(
  () => import("editable-react-table").then(({ TableWrapper }) => TableWrapper), {
  ssr: false, // required because otherwise it complained about `window` being undefined
});

class TableControlComponent extends React.Component<{ /* todo */ }> {
  render() {
    return <root.div className="table" mode="open" style={{border:"1px solid #82888d", display:"block"}}>{
      <div id="root">
        <Table dispatch={console.log} initialState={{
          columns: [{
            id: 'firstName',
            label: 'First Name',
            accessor: 'firstName',
            minWidth: 100,
            dataType: DataTypes.TEXT,
            options: [],
          },
          {
            id: 'lastName',
            label: 'Last Name',
            accessor: 'lastName',
            minWidth: 100,
            dataType: DataTypes.TEXT,
            options: [],
          }],
          data: [{
            ID: 0,
            firstName: "John",
            lastName: "Doe",
          }],
          skipReset: false,
        }}></Table>
      </div>
    }</root.div>
  }
}

and how I hooked it up to Netlify CMS:

  CMS.registerEditorComponent(TableComponent);
  CMS.registerWidget([TableWidget()] as any); // unexposed parameter format

[hermanbanken]

You might not be interested in this PR, please feel free to close it as it ain't done and you might not be willing to maintain it anyway. Anyhow, I wanted to show it and do this small write-up as a way to say 🙏 thank you ❤️ for the nice table functionality and styling (I definitely want to build upon your UX as it feels great in your samples; and I'm no frontender by nature).

I might spend some more time polishing it, extract updated states (so I can write the table state to Netlify CMS components), etc.

[jeff-r-koyaltech]

Very nice! I ended up not using this in the project where I thought that I would. I also discovered that 90% of what I wanted was already exposed and customizable in https://react-table.tanstack.com/ , so my motivation for contributing to and maintaining this library has decreased a little. Nonetheless, it was a helpful context for getting familiar with dependent technologies that make it work. 💪🏼🙏🏼