BTable

Just describe table fields. Use subclasses of TableField.

Example

index.tsx

import React from 'react';
import BTable from '@ui/BTable';
import ITableField from '@ui/BTable/BtableBase/models/ITableField';

const MyComponent: React.FC = () = {
	const actions = [
		{
			type: BTableActionType.EDIT,
			method: (e: any) => handleModal(e, EntityChangeFormType.UPDATE),	
		},
		{
			type: BTableActionType.DELETE,
			method: (e: any) => handleModal(e, EntityChangeFormType.DELETE),
		}
	];

	const listOptions = {
			pagination: {
				enabled: true,
			},
			sort: {
				enabled: false,
			},
		};

	const tableFields: ITableField[] = [
		{
			name: 'title',
			keyName: 'title',
			label: 'Заголовок',
		},
		{
			name: 'id пользователя',
			keyName: 'userId',
			label: 'id пользователя',
		},
	];

	const footFields = [];

	return (
		<>
			<BTable
				fields={tableFields}
				getData={(data: any) => API.getData(data)}
				actions={actions}
				listOptions={listOptions}
				footFields={footFields}
				limit={20}
				rowClick={rowClick}
				style={style}
				nodeStyle={nodeStyle}
			/>
		</>
	);
};

export default MyComponent;

BTable props

IBTableProps<T>

Property	Description	Type	Default
fields	table fields	ITableField[]	-
getData	data get method	```(...args: any[]) => Promise<AxiosResponse<T[]	IErrorResponse>
footFields	table foot fields	ITableFooterField[]	-
actions	array of actions with data in the table	IAction[]	-
limit	number of rows in the table	number	10
rowClick	click on row	```(item?: number	string) => void```
listOptions	table pagination and sorting options	ITableOptions	-
style	container styles	React.CSSProperties	undefined
nodeStyle	node styles	React.CSSProperties	undefined

ITableField

interface ITableField {
	keyName: string;
	label: string;
	sortable?: boolean;
	fieldType?: FieldType;
	props?: any;
	template?: JSX.Element;
}

enum FieldType {
	DATEPICKER,
	SELECT,
	CHECKBOX,
	RADIO,
	INPUT,
	COMPONENT,
}

ITableFooterField

interface ITableFooterField {
	key: string;
	label?: string;
}

IAction

interface IAction {
	method: ((...args: any) => void) | boolean;
	type: BTableActionType;
	template?: JSX.Element;
}

enum BTableActionType {
	READ,
	EDIT,
	DELETE,
	CUSTOM,
}

ITableOptions

interface ITableOptions {
	pagination?: {
		enabled: boolean;
		method?: (page: number) => void;
	};
	sort?: {
		enabled: boolean;
		method?: (sortData: any) => void;
	};
}