@zenequityui/table v0.9.6

Installation

To install a component run

$ npm install @zenequityui/table --save

Please import CSS styles via

@import '/path__to__node_modules/@zenequityui/table/dist/index.min.css

Usage

Simple table

import { Table } from '@zenequityui/table';

const header = [
  { key: 'company', title: 'Company', dataIndex: 'company' },
  { key: 'contact', title: 'Contact', dataIndex: 'contact' },
  { key: 'country', title: 'Country', dataIndex: 'country' },
  { key: 'action', title: 'Action', dataIndex: '', render: (event) => <span onClick={() => { console.log(event); }} style={{ cursor: 'pointer' }}>Delete</span> },
];

const content = [
  { id: 1, 'company': 'Alfreds Futterkiste', 'contact': 'Maria Anders', 'country': 'Germany' },
  { id: 2, 'company': 'Centro comercial Moctezuma', 'contact': '', 'country': 'Mexico' },
  { id: 3, 'company': 'Ernst Handel', 'contact': 'Roland Mendel', 'country': 'Austria' },
  { id: 4, 'company': 'Island Trading', 'contact': 'Helen Bennett', 'country': 'UK' },
  { id: 5, 'company': 'Alfreds Futterkiste', 'contact': 'Maria Anders', 'country': '' },
];

<Table
  tableContent={content}
>
  <Table.CONTENT
    header={header}
    isLoading={false}
    renderLoading={<div>Loading...</div>}
  />
</Table>

Multiple Row

import { Table } from '@zenequityui/table';

const header = [
  { key: 'company', title: 'Company', dataIndex: ['company', 'contact'], dataRender: true, renderItem: (event) => ['', <span style={{ fontWeight: 'bold' }}>{event.contact}</span>] },
  { key: 'country', title: 'Country', dataIndex: 'country', },
];

const content = [
  { id: 1, 'company': 'Alfreds Futterkiste', 'contact': 'Maria Anders', 'country': 'Germany' },
  { id: 2, 'company': 'Centro comercial Moctezuma', 'contact': 'Francisco Chang', 'country': 'Mexico' },
  { id: 3, 'company': 'Ernst Handel', 'contact': 'Roland Mendel', 'country': 'Austria' },
  { id: 4, 'company': 'Island Trading', 'contact': 'Helen Bennett', 'country': 'UK' },
  { id: 5, 'company': 'Alfreds Futterkiste', 'contact': 'Maria Anders', 'country': 'Germany' },
];

const contentValue = [
  { 'company': 'Alfreds Futterkiste', 'contact': 'Maria Anders', 'country': 'Germany' },
  { 'company': 'Centro comercial Moctezuma', 'contact': 'Francisco Chang', 'country': 'Mexico' },
  { 'company': 'Ernst Handel', 'contact': 'Roland Mendel', 'country': 'Austria' },
];

<Table
  id="table2"
  tableContent={content}
>
  <Table.CONTENT
    header={header}
  />
</Table>

Table Selectable

import { Table } from '@zenequityui/table';

const header = [
  { key: 'company', title: 'Company', dataIndex: 'company' },
  { key: 'contact', title: 'Contact', dataIndex: 'contact' },
  { key: 'country', title: 'Country', dataIndex: 'country' },
];

const content = [
  { id: 1, 'company': 'Alfreds Futterkiste', 'contact': 'Maria Anders', 'country': 'Germany' },
  { id: 2, 'company': 'Centro comercial Moctezuma', 'contact': 'Francisco Chang', 'country': 'Mexico' },
  { id: 3, 'company': 'Ernst Handel', 'contact': 'Roland Mendel', 'country': 'Austria' },
  { id: 4, 'company': 'Island Trading', 'contact': 'Helen Bennett', 'country': 'UK' },
  { id: 5, 'company': 'Alfreds Futterkiste', 'contact': 'Maria Anders', 'country': 'Germany' },
];

initialState = {
  selectedItems: [1, 3],
};

<Table
  tableContent={content}
>
  <Table.CONTENT
    header={header}
    isSelectable
    selected={state.selectedItems}
    onSelect={(items) => {
      setState({ selectedItems: items });
    }}
  />
</Table>

Table Sorting

import { Table } from '@zenequityui/table';

const header = [
  { key: 'company', title: 'Company', dataIndex: 'company' },
  { key: 'contact', title: 'Contact', dataIndex: 'contact' },
  { key: 'country', title: 'Country', dataIndex: 'country' },
];

const content = [
  { id: 1, 'company': 'Alfreds Futterkiste', 'contact': 'Maria Anders', 'country': 'Germany' },
  { id: 2, 'company': 'Centro comercial Moctezuma', 'contact': 'Francisco Chang', 'country': 'Mexico' },
  { id: 3, 'company': 'Ernst Handel', 'contact': 'Roland Mendel', 'country': 'Austria' },
  { id: 4, 'company': 'Island Trading', 'contact': 'Helen Bennett', 'country': 'UK' },
  { id: 5, 'company': 'Alfreds Futterkiste', 'contact': 'Maria Anders', 'country': 'Germany' },
];

<Table
  tableContent={content}
>
  <Table.CONTENT
    header={header}
    isSorting
    sortBy={['company', 'country']}
  />
</Table>

Table Collapsable

import { Table } from '@zenequityui/table';

initialState = {
  collapseIndex: null,
};

const header = [
  {
    key: 'company',
    title: 'Company',
    dataIndex: 'company',
  },
  {
    key: 'action',
    title: 'Action',
    dataIndex: '',
    render: (event, index) => (
      <button
        style={{ cursor: 'pointer' }}
        onClick={() => {
          setState({
            collapseIndex: state.collapseIndex === index ? null : index,
          });
        }}
      >
        View
      </button>
    )
  },
];

const content = [
  {
    id: 1,
    company: 'Alfreds Futterkiste',
    children: {
      header: [
        { key: 'country', title: 'Country', dataIndex: 'country' },
        { key: 'contact', title: 'Contact', dataIndex: 'contact' },
      ],
      body: [
        { country: 'Germany', contact: 'Maria Anders' },
        { country: 'Mexico', contact: 'Centro comercial Moctezuma' },
      ],
    },
  },
  {
    id: 2,
    company: 'Ernst Handel',
    children: {
      header: [
        { key: 'country', title: 'Country', dataIndex: 'country' },
      ],
      body: [
        { country: 'Austria' },
      ],
    },
  },
  {
    id: 3,
    company: 'Island Trading',
    children: {
      header: [
        { key: 'country', title: 'Country', dataIndex: 'country' },
        { key: 'contact', title: 'Contact', dataIndex: 'contact' },
      ],
      body: [
        { country: 'UK', contact: 'Helen Bennett' },
        { country: 'Germany', contact: 'Maria Anders' },
      ],
    },
  },
];

<Table
  tableContent={content}
>
  <Table.CONTENT
    header={header}
    isLoading={false}
    renderLoading={<div>Loading...</div>}
    collapseIndex={state.collapseIndex}
  />
</Table>

Multiple Header

import { Table } from '@zenequityui/table';

const header = [
  { key: 'company', title: 'Company', dataIndex: 'company' },
  {
    key: 'information',
    title: 'Information',
    dataIndex: '',
    multiChild: [
      { key: 'contact', title: 'Contact', dataIndex: 'contact' },
      { key: 'country', title: 'Country', dataIndex: 'country' },
      {
        key: 'action',
        title: 'Action',
        dataIndex: '',
        render: (event) => (
          <button
            style={{ cursor: 'pointer' }}
            onClick={() => {
              console.log('query event', event);
            }}
          >
            View
          </button>
        )
      },
    ],
  },
];

const content = [
  {
    id: 1,
    company: 'Alfreds Futterkiste',
    multiChild: [
      { contact: 'Maria Anders', country: 'Germany' },
    ],
  },
  {
    id: 2,
    company: 'Centro comercial Moctezuma',
    multiChild: [
      { contact: '', country: 'Mexico' },
    ],
  },
  {
    id: 3,
    company: 'Ernst Handel',
    multiChild: [
      { contact: 'Roland Mendel', country: 'Austria' },
    ],
  },
  {
    id: 4,
    company: 'Island Trading',
    multiChild: [
      { contact: 'Helen Bennett', country: 'UK' },
    ],
  },
  {
    id: 5,
    company: 'Alfreds Futterkiste',
    multiChild: [
      { contact: 'Helen Bennett', country: 'UK' },
      { contact: 'Maria Anders', country: '' },
    ],
  },
];

<Table
  tableContent={content}
>
  <Table.CONTENT
    header={header}
    isLoading={false}
    renderLoading={<div>Loading...</div>}
  />
</Table>