Table Component

The Table component is a versatile and customizable table that supports sorting, filtering, and exporting data. It provides various features to enhance data presentation and interaction.

Props

Prop	Type	Default	Description
tableConfig	TableConfig	required	Configuration object for the table
isSerialized	boolean	true	Whether to show row numbers
size	"xs" \| "s" \| "m" \| "l" \| "xl"	"m"	Sets the size of the table
header	boolean	true	Whether to show the table header
title	string	""	Title of the table
printSize	string	"A4 landscape"	Page size for printing
sum	boolean	false	Whether to show sum row for numeric columns

Usage

import { Table } from 'knoxui-react';

const tableConfig = {
  data: [
    { id: 1, name: 'John Doe', age: 30, city: 'New York' },
    { id: 2, name: 'Jane Smith', age: 25, city: 'Los Angeles' },
    { id: 3, name: 'Bob Johnson', age: 35, city: 'Chicago' },
  ],
  columns: [
    { key: 'id', header: 'ID' },
    { key: 'name', header: 'Name' },
    { key: 'age', header: 'Age', dataType: 'int' },
    { key: 'city', header: 'City' },
  ],
};

<Table tableConfig={tableConfig} />

Examples

Basic Usage

#	ID	Name	Age	City

1	1	John Doe	30	New York
2	2	Jane Smith	25	Los Angeles
3	3	Bob Johnson	35	Chicago

Custom Size

#	ID	Name	Age	City

1	1	John Doe	30	New York
2	2	Jane Smith	25	Los Angeles
3	3	Bob Johnson	35	Chicago

With Title and Sum

Employee Data

#	ID	Name	Age	City

1	1	John Doe	30	New York
2	2	Jane Smith	25	Los Angeles
3	3	Bob Johnson	35	Chicago

Without Header and Serialization

ID	Name	Age	City

1	John Doe	30	New York
2	Jane Smith	25	Los Angeles
3	Bob Johnson	35	Chicago

Features

Sorting: Click on column headers to sort the data
Filtering: Use the search inputs to filter data in each column
Exporting: Export data to Excel or PDF formats
Responsive: Adapts to different screen sizes
Customizable: Adjust size, appearance, and functionality