Zeconomy FlexTable

Introduction

FlexTable is a modular data-agnostic React Component designed to show large sets of data objects in an array with some simple interactions like selection and more.

FlexTable was designed to be as developer friendly as possible, allowing easy customization with special utilities to create headers, object mappings, and a "Plain English" approach to rendering a table so just by reading examples, getting your first table to render would be as easy as possible.

At the time of this Writing, FlexTable is not ready for Open Source, and is only to be used internally at Zeconomy Inc, but if you're reading this, I really hope we're able to one day get this guy out into the npm ecosystem :D.

Getting Started

Make sure you are connected to the Zeconomy VPN, then run these commands:

Install with npm or yarn

$ npm install https://git.zeconomy.com/bjunya/zeconomy-flextable --save

$ yarn add https://git.zeconomy.com/bjunya/zeconomy-flextable

Import the component using ES6 import syntax

import React from 'react';
import ReactDOM from 'react-dom';

import FlexTable from 'zeconomy-flextable';

// You can now use <FlexTable>

You may want to install an additional package called TableUtils. This is purely optional, but TableUtils has some highly useful utilities that will allow you to build a FlexTable with a "Plain English" or "Least Brainpower Utilized" approach. Installing TableUtils with the following command:

$ npm install https://git.zeconomy.com/bjunyua/zeconomy-flextable-utils

How to build a FlexTable

Most of this is available on an older Confluence Document from May '17. However, it does not include the new syntax for using the centralized repo as shown here.

import React from 'react';
import {render} from 'react-dom';

import FlexTable from 'zeconomy-flextable';
import { createHeader, createTableMap } from 'zeconomy-flextable-utils';

// Some dummy data for example purposes
const data = [
    {
        "object_attr_first": 'I am the first column',
        "second_object_attr": 'This data in column no. 2 :)',
        "money": 234.32
    },
    {
        "object_attr_first": 'I am the first column',
        "second_object_attr": 'This data in column no. 2 :)',
        "money": 234.32
    }
];

let headers = [];
header.push(
    createHeader('First Column', 'object_attr_first', 'string'),
    createHeader('Second Column', 'second_object_attr', 'string'),
    createHeader('Money Column', 'money', 'currency')
);

render(
    <FlexTable
        name="myTable"
        data={data}
        selectable={false}
        headers={headers}
        useApi={false}
        itemMap={createTableMap(headers)} />,
    document.getElementById('container')
);