Curio-table-ants NPM

table-ants

Installation & Usage

npm install curio-table-ants --save

import TableAnts, {TableAntsProps, TableAntsColumn} from "curio-table-ants"

const props: TableAntsProps = {
    fetchURL: location.origin + "/api/user/all"
}

const columns: TableAntsColumn[] = [
    {
        title: "Email",
        dataIndex: "email",
        key: "email",
        type: "string",
        render(text: any, row: any) {
            return `${text}(${row.name})`
        }
    }
]
render((
    <TableAnts {...props} />
), document.getElementById("#app")

Configuration

TableAntsProps

PropName	Type	Description	Default value
begin	`number`	a Unix timestamp	Timestamp of the day 10 days before today
end	`number`	a Unix timestamp	Timestamp of now
download	`boolean`	Display the download button or not	`true`
format	`string`	the extention of the file to be downloaded	".execl"
onTimeChange	`(ts: number[]) => boolean`		Call back when timepicker's value is changed
pageSize	`number`	row of data in each page	20
payloadExtra	`object`	extra payload required by fetchURL API	{}
sheetName	`string`	the name of file to be doanloaded	"Sheet"
timepicker	`boolean`	Display the timepicker or not	false
path	`string`	relative path of data array (in the JSON object returned by fetchURL API)	""
baseColor	`string`	a HSL color value, will be used in many components in the table	hsl(132, 40%, 57%)
onDataFetched	`(data: any) => void`	Callback function which is called when data is fetched.
filters	`JSX.Element[]`	A list of cusomized filter component	[]
lang	`string`	language	"en-US"
downloadURL	`string`	the API that fetch data from fetchURL and return the download link	required
fetchURL	`string`	the API that return actual data (Must be the absolute URL of a HTTP POST API	required
totalKey	`string`	relative path of the total number of data (in the JSON object returned by fetchURL API)	required
columns	`TableAntsColumn[]`	Definition of columns	required

TableAntsColumn

PropName	Type	Description	Default value
title	string \| JSX.Element	the column title
dataIndex	`string`	the key (or path) of data (in a single row).	You can imit dataIndex to hide this column in the page
key	`string`	same as dataIndex.	You can omit key to remove this column in the download file
type	`string`	type in Golang, should be one of `int64`, `string`, `bool`, `slice` or `float64`]	required if key is present
conv	`string[]`	a list of conv functions (conv originial data to readable format in download file)
hideByDefault	`boolean`	literally "hide by default"
dlDataIndex	`string`	column will be download only if the column spicified by dlDataIndex is visible in the table
render	(text: any, row: any) => string \| JSX.Element	render function
filters	`any[]`
onFilter	`(v: string) => void`
colSpan	`number`	how many colspans the column will occupy
width	number \| string
className	`string`
sorter	`(a: any, b:any): boolean`	a valid sorter function