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 ||