@paraboly/react-matrix-table
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

React Matrix Table

Simple matrix table for react

NPM Maintenance GitHub license

Demo

alt text

Check example folder

Install

npm install --save @paraboly/react-matrix-table

Usage

import React from 'react';
import { scaleLinear } from 'd3-scale';
import ReactMatrixTable from '@paraboly/react-matrix-table';

const opacityScale = scaleLinear()
  .domain([1, 21])
  .range([100, 255]);

const RmtExample = (): React.ReactElement => {
  const props = {
    rows: ['January', 'February', 'March'],
    columns: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    data: [
      [1, 2, 3, 4, 5, 6, 7],
      [8, 9, 10, 11, 12, 13, 14],
      [15, 16, 17, 18, 19, 20, 21],
    ],
    cellColorFunction: (value: number | string) => {
      const opacity = opacityScale(value);
      const color = `rgba(255, 0, 0, ${opacity / 255})`;
      return color;
    },
  };

  return (
    <ReactMatrixTable
      rows={props.rows}
      columns={props.columns}
      data={props.data}
      cellColorFunction={props.cellColorFunction}
    />
  );
};

export default RmtExample;

Details

Props Definition Type Default Required
rows Matrix row labels string[] - true
columns Matrix column labels string[] - true
data Data for matrix cells (string | number)[][] - true
cellColorFunction Cell color function which should return color code compatible with css color (value: number | string) => string undefined false
caption Caption for the matrix table string - false

License

MIT © SchemeSonic@Paraboly

Readme

Keywords

none

Package Sidebar

Install

npm i @paraboly/react-matrix-table

Weekly Downloads

0

Version

0.1.2

License

MIT

Unpacked Size

29.7 kB

Total Files

15

Last publish

Collaborators

  • parabolynpm