Lite UI | Table

Guide

Installation

Design Principles

Components

Lite UI

Guide

Components

A table is used to display rows of data.

Import

import { Table } from '@ma9pie/lite-ui';

Source

components/Table.tsx

Examples

Name	Age	Address
John Smith	25	123 Main Street, New York
Emily Johnson	30	456 Oak Avenue, Los Angeles
Michael Brown	28	789 Elm Street, Chicago

import { Avatar, Table, TableField } from '@ma9pie/lite-ui';
import React from 'react';

const App = () => {
  const field: TableField[] = [
    {
      key: 'name',
      value: 'Name',
      flex: 2,
      align: 'start',
      render: ({ imgNum, name }) => (
        <div className="flex items-center gap-2">
          <Avatar src={'https://i.pravatar.cc/150?img=' + imgNum}></Avatar>
          <p>{name}</p>
        </div>
      ),
    },
    { key: 'age', value: 'Age', flex: 1, align: 'center' },
    { key: 'address', value: 'Address', flex: 3, align: 'end' },
  ];
  const rows = [
    {
      key: 0,
      imgNum: 11,
      name: 'John Smith',
      age: 25,
      address: '123 Main Street, New York',
    },
    {
      key: 1,
      imgNum: 49,
      name: 'Emily Johnson',
      age: 30,
      address: '456 Oak Avenue, Los Angeles',
    },
    {
      key: 2,
      imgNum: 67,
      name: 'Michael Brown',
      age: 28,
      address: '789 Elm Street, Chicago',
    },
  ];

  return <Table minWidth={600} field={field} rows={rows}></Table>;
};

export default App;

API

Table props

Property	Type	Description	Default
minWidth	number \| string	Table's min width.	-
field	TableField[]	Table field data.	-
rows	TableRow[]	Table row data.	-

Default props

Property	Type	Description	Default
key	string	Unique key that identifies repeated elements.	-
className	string	Attribute used to add classes to HTML elements.	-
style	CSSProperties	Attribute used to apply CSS styles directly to HTML elements.	-

Types

TableField

export interface TableField {
  key: number | string;
  value: string;
  flex?: number;
  align?: 'start' | 'center' | 'end';
  render?: (props: any) => ReactNode;
}

TableRow

export interface TableRow {
  key: number | string;
  [property: string]: any;
}

Made by ma9pie

Deployed on