API Documentation
Tutorials
How to use Pre-requisites

Title

Global

Methods

# cbSelection(e)

How must look the function for the property cbSelection
Parameters:
Name Type Description
e Event Event for the clicked row.

View Source helpers/api.js, line 78

# cbSelection(e)

How must look the function for the property cbSelection
Parameters:
Name Type Description
e Event Event for the clicked row.

View Source helpers/api.ts, line 26

# async paginationFn(page, order, columnOrdering, additionalQuery) → {object}

How must looks like the functions that fetchs data from the API
Parameters:
Name Type Description
page number The page requested of the information
order string ASC or DESC the data
columnOrdering string Which column it's gonna be counted for the sorting (must match with the column table of the table on DB)
additionalQuery string | undefined In case you want set more url params, you need to pass the array

View Source helpers/api.js, line 41

object

# async paginationFn(page, order, columnOrdering, additionalQuery) → {object}

How must looks like the functions that fetchs data from the API
Parameters:
Name Type Description
page number The page requested of the information
order string ASC or DESC the data
columnOrdering string Which column it's gonna be counted for the sorting (must match with the column table of the table on DB)
additionalQuery string | undefined In case you want set more url params, you need to pass the array

View Source helpers/api.ts, line 3

object

Type Definitions

object

# APIConfig

Configuration that must receive "APITable" in order to work
Properties:
Name Type Attributes Description
idTable string HTML id of the tag table that it's on the HTML
idPagination string HTML id of the tag "container" for the pagination that it's on the HTML
urlParams object <optional>
 Each attribute will be the name of the query param and his value, well, his value.
pages number Number of pages that has the fetched data
rows Array.<object> Data fetched from the API that's that can be printed on the table
actualPage number Actual page that corresponds to the fetched data
headerConfig Array.<HeadersConfig> Configuration to set the headers of the table
styleTable string <optional>
 If you want to try some of the themes that offers this library, you can pass as argument , the name of the theme to apply it. If it's not passed, you probably must style it, otherwise will look a king of ugly
cbSelection function <optional>
 A function that you can pass as argument to something after you click some row of the table
urlParams string <optional>
 If your API use query params and this url params could be change because the user can filter the information or something. , You can change this attribute. In case it's !== from undefined, it will be add to the url endpoint.
idRows string The "tr" tags that will be build. Can have an "id" attribute. This id will be get from one of the attributes , of the fetched data. So, the string must match with the response of the resource data.
sort Sort This will the manner of sorting the data in case the user press the column of the table
paginationFn function This function will be use to fetch data through the buttons of navagition, and, if the API allows it, to order the data by columns in ASC or DESC
attributesResponse AttributesResponse Name of the attributes that contains the data fetched
stringQuery string <optional>
 Actually, you dont't need to touch it or add it. It's just in order to work

View Source types.d.ts, line 3

Example
const configuration: APIConfig = {
        idTable: 'users-info',
        idPagination: 'pagination-users-info',
        urlParams:'&hora=4&materia=1',
        pages: 10,
        actualPage: 2,
        rows: [{...},{...},{...}],
        headerConfig: [
        { text: 'Materia', columnNameDB: 'nombreMateria', idHeader: 'nameAssignature', attributeToPrint: 'nombreMateria', sortable: true, sortThis: true },
        { text: 'Salon', columnNameDB: 'salon', idHeader: 'assignatureRoom', attributeToPrint: 'salon', sortable: true }
        ],
        styleTable: 'default',
        sort : {
            sqlSort: true,
            sortASC: true   
        },
        idRows: 'idAssignature',
        cbSelection,
        paginationFn,
        attributesResponse:{
            actualPage:'actualPage',
            pages:'pages',
            data:'assignatures'
        }
    }
object

# AttributesResponse

When the data it's fetched, we need to know which one correspond to match the data with the library
Properties:
Name Type Description
pages string When the information respons the JSON, it's necessary know the name of the attribute that contains the , number of pages
actualPage string When the information respons the JSON, it's necessary know the name of the attribute , that contain the actualPage
data string When the data comes, in which attribute it's that Array

View Source types.d.ts, line 89

Example
const attributes:AttributesResponse = {
        actualPage:'actualPage',
        pages:'pages',
        data:'assignatures'
    }
object

# HeadersConfig

Configuration to set properyly the header of the printed table
Properties:
Name Type Attributes Description
text string Text that's gonna be showed on the "th" tags
columnNameDB string <optional>
 Name of the column that corresponds on the table, this must match in case you want order the data from the DB
idHeader string The id attribute of the tag "th" that's gonna be created
attributeToPrint string Name of the property to print. From the data fetched, you need to choose which data it's gonna be printed , for that column
css string <optional>
 The rows that will be printed can have your custom css classes in case you want add , a bold font, an specific color, an aligment, etc.
sortable boolean This will indicate if it's allowed to sort the column by ASC or DESC (independently if the class on the client-side or API)
sortThis boolean <optional>
 This it's just to highlight on the html the actual sorting

View Source types.d.ts, line 54

Example
const header = [
    { text: 'Materia', columnNameDB: 'nombreMateria', idHeader: 'nameAssignature', attributeToPrint: 'nombreMateria', sortable: true, sortThis: true },
    { text: 'Salon', columnNameDB: 'salon', idHeader: 'assignatureRoom', attributeToPrint: 'salon', sortable: true }
    ]
object

# Sort

The table can be sort, we need to know how will be the sort
Properties:
Name Type Attributes Description
sqlSort boolean If true, the code will fetch the actual page to the DB, but sending the params of sorting. , If false, the data will be sorted on the client side
sortASC boolean true for ASC and false for DESC
sortingColumn string <optional>
 No need to touch, just to ensure the library works

View Source types.d.ts, line 74

Example
const sort: Sort = {
        sqlSort: true,
        sortASC: true
    }