flyers-ui v0.1.16

Getting Started with Flyers UI Components

Installation

npm install --save flyers-ui

Usage

import { Table, Pagination } from 'flyers-ui';

const [currentPage, setCurrentPage] = React.useState(1);
const currentTableData = React.useMemo(() => {
	const firstPageIndex = (currentPage - 1) * PageSize;
	const lastPageIndex = firstPageIndex + PageSize;
	return data.slice(firstPageIndex, lastPageIndex);
}, [currentPage]);

const columns = React.useMemo(
	() => [
		{
			title: 'Name',
			dataIndex: 'name',
			key: 'name',
			width: '25%',
		},
		{
			title: 'Age',
			dataIndex: 'age',
			key: 'age',
			width: '10%',
		},
		{
			title: 'Address',
			dataIndex: 'address',
			key: 'address',
			width: '25%',
			render: (value, record, index) => (
				<input value={value} onChange={({ target: { value } }) => handleRowInputChange('address', value, index)} />
			),
		},
		{
			title: 'Operations',
			dataIndex: '',
			key: 'operations',
			width: '25%',
			render: () => <a href="#">Delete</a>,
		},
	],
	[]
);

<Table columns={columns} data={currentTableData} />
<Pagination
	className="pagination-bar"
	currentPage={currentPage}
	totalCount={data.length}
	pageSize={PageSize}
	onPageChange={(page) => setCurrentPage(page)}
/>

let PageSize = 10;
import { Table, Pagination } from 'flyers-ui';
const [currentPage, setCurrentPage] = React.useState(1);
const [name, setName] = React.useState('');
const [data, setData] = React.useState([
	{ name: 'Jack', age: 28, address: 'some where' },
	{ name: 'Rose', age: 36, address: 'some where' },
]);

const currentTableData = React.useMemo(() => {
	const firstPageIndex = (currentPage - 1) * PageSize;
	const lastPageIndex = firstPageIndex + PageSize;
	return data.slice(firstPageIndex, lastPageIndex);
}, [currentPage]);

const columns = React.useMemo(
	() => [
		{
			title: 'Name',
			dataIndex: 'name',
			key: 'name',
			width: '25%',
		},
		{
			title: 'Age',
			dataIndex: 'age',
			key: 'age',
			width: '10%',
		},
		{
			title: 'Address',
			dataIndex: 'address',
			key: 'address',
			width: '25%',
			render: (value, record, index) => (
				<input value={value} onChange={({ target: { value } }) => handleRowInputChange('address', value, index)} />
			),
		},
		{
			title: 'Operations',
			dataIndex: '',
			key: 'operations',
			width: '25%',
			render: () => <a href="#">Delete</a>,
		},
	],
	[]
);

const handleRowInputChange = React.useCallback((label, value, rowId) => {
	const newData = [...data];
	newData[rowId][label] = value;
	setData(newData);
}, []);

<div className="App">
	<input value={name} style={{ width: 100 }} placeholder="enter name" onChange={({ target: { value } }) => setName(value)} />
	<Table columns={columns} data={currentTableData} />
	<Pagination
		className="pagination-bar"
		currentPage={currentPage}
		totalCount={data.length}
		pageSize={PageSize}
		onPageChange={(page) => setCurrentPage(page)}
	/>
</div>;