Nest Table

React UI library for marketplace created by Nest design team.

Installation

$ npm i @nest-ui/table @emotion/react@^11.10.4

Basic usage

import { Table } from '@nest-ui/table';

const Greetings = () => {
  const data = [
    {
      name: 'Batu Mulia & Batu Alam',
      currency: '750000',
      number: '50',
      percent: '50',
      date: 'yesterday',
      time: 'yesterday',
      notfixed: 'Not Fixed',
    },
    {
      name: 'Batu Mulia & Batu Alam',
      currency: '750000 ',
      number: '50',
      percent: '50',
      date: 'yesterday',
      time: 'yesterday',
      notfixed: 'Not Fixed',
    },
    {
      name: 'Batu Mulia & Batu Alam',
      currency: '750000 ',
      number: '50',
      percent: '50',
      date: 'yesterday',
      time: 'yesterday',
      notfixed: 'Not Fixed',
    },
    {
      name: 'Batu Mulia & Batu Alam',
      currency: '750000 ',
      number: '50',
      percent: '50',
      date: 'yesterday',
      time: 'yesterday',
      notfixed: 'Not Fixed',
    },
  ];

  return (
    <Table
      fixedHeader={true}
      columns={[
        {
          title: <Checkbox />,
          key: 'check',
          render: () => <Checkbox />,
        },
        {
          title: 'STATUS',
          key: 'status',
          render: () => <span>Active</span>,
        },
        { title: 'NAME', key: 'name' },
        { title: 'CURRENCY', key: 'currency' },
        { title: 'NUMBER', key: 'number' },
        { title: 'PERCENT', key: 'percent' },
        { title: 'DATE', key: 'date' },
        { title: 'TIME', key: 'time' },
      ]}
      data={data}
    ></Table>
  );
};

Showcase

Comming soon...

Future ideas

TBH...