@fvc/table

@fvc/table

@fvc/table provides a data table component built on top of Ant Design's Table. It applies the FE-VIS class prefix and exposes the full Ant Design Table API so existing antd table knowledge transfers directly.

Installation

bun add @fvc/table

Peer Dependencies

The package expects these dependencies to be available in the consuming application:

bun add react antd

Import

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

Quick Start

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

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

const data = [
  { key: '1', name: 'Alice', age: 30 },
  { key: '2', name: 'Bob', age: 25 },
];

export function UserTable() {
  return <Table columns={columns} dataSource={data} />;
}

Common Usage

Sortable Columns

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    sorter: (a, b) => a.name.localeCompare(b.name),
  },
  {
    title: 'Age',
    dataIndex: 'age',
    sorter: (a, b) => a.age - b.age,
  },
];

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

Pagination

<Table
  columns={columns}
  dataSource={data}
  pagination={{ pageSize: 10, total: 100, current: page, onChange: setPage }}
/>

Row Selection

const [selectedRowKeys, setSelectedRowKeys] = useState([]);

<Table
  columns={columns}
  dataSource={data}
  rowSelection={{
    selectedRowKeys,
    onChange: setSelectedRowKeys,
  }}
/>;

Loading State

<Table columns={columns} dataSource={data} loading={isFetching} />

Horizontal Scroll

<Table columns={columns} dataSource={data} scroll={{ x: 1200 }} />

Props

Extends all Ant Design TableProps.

Prop	Type	Description
columns	ColumnsType	Column definitions (title, dataIndex, render, etc.).
dataSource	object[]	Array of row data records.
rowKey	string | function	Unique key for each row (defaults to 'key').
loading	boolean	Shows a loading indicator over the table.
pagination	object | false	Pagination config; false to disable.
rowSelection	object	Checkbox selection config.
onChange	function	Callback when pagination, filters, or sorter change.
scroll	object	Enables horizontal or vertical scrolling.

TypeScript

The package ships with type definitions. No @types/ install needed.

import type { TableProps } from '@fvc/table/types';

Consumer Example

import { Table } from '@fvc/table';
import { useState } from 'react';

export function OrdersTable({ orders, loading }) {
  const [page, setPage] = useState(1);

  const columns = [
    { title: 'Order ID', dataIndex: 'id', key: 'id' },
    { title: 'Customer', dataIndex: 'customer', key: 'customer' },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      filters: [
        { text: 'Pending', value: 'pending' },
        { text: 'Shipped', value: 'shipped' },
      ],
      onFilter: (value, record) => record.status === value,
    },
  ];

  return (
    <Table
      columns={columns}
      dataSource={orders}
      loading={loading}
      rowKey="id"
      pagination={{ current: page, pageSize: 20, onChange: setPage }}
    />
  );
}

Development

bun run lint
bun run type-check
bun run test
bun run build