import * as React from "react";
import ReactTable from "react-table";
import ReactTableStyles from "../css/react-table";
import withFixedColumns from "react-table-hoc-fixed-columns";
const ReactTableFixedColumns = withFixedColumns(ReactTable);

export const DataResourceTransformGrid = ({
  data: { data, schema },
  height
}) => {
  const tableColumns = schema.fields.map((f, i) => ({
    Header: f.name,
    accessor: f.name,
    fixed: i === 0 && "left"
  }));

  return (
    <div style={{ width: "calc(100vw - 150px)" }}>
      <ReactTableFixedColumns
        data={data}
        columns={tableColumns}
        style={{
          height: `${height}px`
        }}
        className="-striped -highlight"
      />
      <style jsx>{ReactTableStyles}</style>
    </div>
  );
};

import * as React from "react";
import ReactTable from "react-table";
import ReactTableStyles from "../css/react-table";
import withFixedColumns from "react-table-hoc-fixed-columns";
const ReactTableFixedColumns = withFixedColumns(ReactTable);

export const DataResourceTransformGrid = ({
  data: { data, schema },
  height
}) => {
  const tableColumns = schema.fields.map((f, i) => ({
    Header: f.name,
    accessor: f.name,
    fixed: i === 0 && "left"
  }));

  return (
    <div style={{ width: "calc(100vw - 150px)" }}>
      <ReactTable
        data={data}
        columns={tableColumns}
        style={{
          height: `${height}px`
        }}
        className="-striped -highlight"
      />
      <style jsx>{ReactTableStyles}</style>
    </div>
  );
};

Disable ReactTableFixedColumns til prefixed uniqid
Disable ReactTableFixedColumns til prefixed uniqid

Stuck with this until

https://github.com/GuillaumeJasmin/react-table-hoc-fixed-columns/pull/12

because sometimes uniqid will generate an invalid selector (leading digit). This ends up
being deterministic per machine because they're using the mac address of the system
as part of the hash.
