Table

A table displays rows of data with customizable columns.

When To Use

• To display a collection of structured data
• To sort, search, paginate, or filter data
• When you need to perform operations on data entries

Basic Usage

import { TxTable } from "tx-design-ui";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
  },
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
  },
];

<TxTable columns={columns} dataSource={data} />;

With Actions

Add action buttons using the render property.

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Action",
    key: "action",
    render: (_, record) => (
      <div>
        <TxButton size="small" onClick={() => console.log("Edit", record)}>
          Edit
        </TxButton>
        <TxButton size="small" type="danger" onClick={() => console.log("Delete", record)}>
          Delete
        </TxButton>
      </div>
    ),
  },
];

Custom Render

Use the render function to customize cell content.

const columns = [
  {
    title: "Status",
    dataIndex: "status",
    key: "status",
    render: status => {
      const colorMap = {
        active: "success",
        pending: "warning",
        inactive: "default",
      };
      return <TxTag color={colorMap[status]}>{status.toUpperCase()}</TxTag>;
    },
  },
];

Sizes

Three sizes are available: small, medium (default), and large.

<TxTable columns={columns} dataSource={data} size="small" />
<TxTable columns={columns} dataSource={data} size="medium" />
<TxTable columns={columns} dataSource={data} size="large" />

Alignment

Set text alignment for columns.

const columns = [
  {
    title: "Name (Left)",
    dataIndex: "name",
    key: "name",
    align: "left",
  },
  {
    title: "Age (Center)",
    dataIndex: "age",
    key: "age",
    align: "center",
  },
  {
    title: "Address (Right)",
    dataIndex: "address",
    key: "address",
    align: "right",
  },
];

Empty State

Customize the message when there's no data.

<TxTable columns={columns} dataSource={[]} emptyText="No data available" />

API

Table

Property	Type	Default	Description
columns	Array	[]	Table columns config (see below)
dataSource	Array	[]	Data to be displayed
size	'small' | 'medium' | 'large'	'medium'	Size of table
bordered	boolean	true	Whether to show border
hoverable	boolean	true	Whether to show hover effect on rows
emptyText	string | ReactNode	'No data'	Text to show when no data

Column

Property	Type	Default	Description
title	string | ReactNode	-	Column title
dataIndex	string	-	Data field to display
key	string	-	Unique key for the column
align	'left' | 'center' | 'right'	'left'	Text alignment
render	function(value, record, index)	-	Custom render function

Notes

• Each row in dataSource should have a unique key property
• Use the render function for custom cell rendering
• The table is responsive and will scroll horizontally on small screens
• Consider adding pagination for large datasets