Skip to Content
UI KitAKI ComponentsAkiTable

Overview

The Akitable component, is designed to manage and display complex datasets in React applications efficiently. It integrates with Ant Design for robust UI elements and extends functionality with custom theming, pagination, and row selection capabilities.

Key Features

  • Dynamic Data Rendering: Easily render data arrays with customizable columns.
  • Integrated Pagination: Managed through the pagination prop for smooth navigation.
  • Flexible Row Selection: Offers various row selection options with customizable actions.
  • Customizable Styling: Adapt the table to different UI themes, with options for background removal and scroll behavior.
  • Extensible Design: Works seamlessly with header, footer, and actions props.

Example Usage

import type {
  AkitableAction,
  AkitableColumn,
  AkitablePaginatedData,
  AkitablePaginationProps,
  SorterChangeEvent
} from '@akinon/akitable';
import { Akitable } from '@akinon/akitable';
 
const results = [
  {
    key: '1',
    name: 'Mike',
    age: 32
  },
  {
    key: '2',
    name: 'John',
    age: 42
  }
];
 
const MyComponent = () => {
  const data: AkitablePaginatedData = {
    count: results.length,
    results
  };
 
  const columns: AkitableColumn[] = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age'
    }
  ];
 
  const actions: AkitableAction[] = [
    {
      label: 'Delete',
      onSelect: (selectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys: ', selectedRowKeys);
      }
    }
    // Additional actions...
  ];
 
  const pagination: AkitablePaginationProps = {
    page: 1,
    size: 20
  };
 
  const handleSorterChange: SorterChangeEvent = (sorter) => {
    console.log('Sorter changed: ', sorter);
  };
 
  return (
    <Akitable
      isLoading={false}
      data={data}
      columns={columns}
      actions={actions}
      pagination={pagination}
      rowKey="key"
      onChangeSorter={handleSorterChange}
      // Additional Akitable props...
    />
  );
};
 
export default MyComponent;

Akitable Props

Akitable props provide various options for configuring the table component:

PropertyDescriptionType
isLoadingIndicates if the data is currently loading.boolean
dataArray of data objects to display.AkitableData[] | AkitablePaginatedData
columnsConfiguration for the table columns.AkitableColumn[]
actionsArray of actions that can be performed on selected rows.AkitableAction[]
headerManages the display of the table’s header.AkitableHeaderProps | undefined
footerManages the display of the table’s footer.AkitableFooterProps | undefined
rowKeyRow’s unique key.string
paginationPagination settings to control the page navigation.AkitablePaginationProps | undefined
onRowClickConfiguration for row click features.RowClickEvent | undefined
onRowEditConfiguration for row edit features.RowEditCallback | undefined
onChangeSorterCalled when table sorting is changed.SorterChangeEvent | undefined
onPaginationChangedCalled when the page number or page size is changed.PaginationChangeEvent | undefined

Types

interface AkitableData {
  [key: string]: any;
}
 
interface AkitablePaginatedData {
  count: number;
  next?: string | null;
  previous?: string | null;
  results: AkitableData[];
}
import type { TableColumnType } from 'antd';
 
interface AkitableColumn extends TableColumnType<AkitableData> {
  copyable?: boolean;
  editable?: boolean;
}

You can learn about TableColumnType type here .

interface AkitableAction {
  label: string;
  onSelect: (selectedRowKeys: React.Key[]) => void;
}
interface AkitableHeaderProps {
  title?: string;
  extra?: ReactNode;
}
interface AkitableFooterProps {
  extra?: ReactNode;
}
type AkitablePageSizes = 20 | 50 | 100 | 250;
 
interface AkitablePaginationProps {
  page: number;
  size: AkitablePageSizes;
}
type RowClickEvent = (
  record: AkitableData,
  event?: React.MouseEvent<HTMLElement>,
  rowIndex?: number
) => void;
type RowEditCallback = (
  modifiedRecord: AkitableData,
  payload: AkitableData
) => void | Promise<void>;
type PaginationChangeEvent = (page: number, size: number) => void;
type SortOrder = 'descend' | 'ascend' | null;
 
interface SorterResult {
  column?: AkitableColumn;
  order?: SortOrder;
  field?: string | readonly string[];
  columnKey?: string;
}
 
type TableOnChangeSorter = SorterResult | SorterResult[];
 
type SorterChangeEvent = (sorter: TableOnChangeSorter) => void;
enum AkitableRowStatus {
  PENDING = 'pending',
  ERROR = 'error'
}
AkiformBuilderAkival