0.2.16 • Published 8 years ago
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 | |