Nervously Practice Multithreading

    @wynsoft/dynamic-table

    0.1.3 • Public • Published

    Dynamic Table

    This library provide a React JS based Table component which has pagination and sorting. The headers and data have to be set dynamically.

    Installation

    npm install @wynsoft/dynamic-table
    

    Properties

    headers:

    This is a array of objects of the following format: { title, width, align, fieldName }

    • title (required): This sets the column title.
    • width (optional): This sets the width of the column. If left out it, the width will be auto determined. It's recommended to set this for proper formatting.
    • align (optional): This align the contents of the column. Choices are - left, center, right. Default is left
    • fieldName (required): This sets the field name from which the data comes. It should match the field name specified in the data object.

    Example:

        {
          title: "First Name",
          width: "150px",
          align: "left",
          fieldName: "firstName"
        }
    

    data

    This is a array of array objects that contain the data for the table. Each column of data is a Array of objects. The example below shows how you must setup your data. Each object has the and/or the fieldType. Currently, currency is the only supported fieldType.

    Example:

    [
        [
          { id: 1 },
          { firstName: "George" },
          { lastName: "Benson" },
          { address: "125 Main St., Canton, Ohio" },
          { salary: 85000, fieldType: "currency" }
        ],
        [
          { id: 2 },
          { firstName: "Stacy" },
          { lastName: "Locksmith" },
          { address: "25-525 King St., Canton, Ohio" },
          { salary: 105000, fieldType: "currency" }
        ]
    ]
    

    pageSize

    This sets the number of rows to display per page. Pass it within {}. Default is 10.

    currentPage

    This sets the current page to display. Pass it with {}. Default is 1.

    sortOn

    This sets the fieldName to sort on. It's required and must be one of the field names from the data object.

    sortOrder

    This sets the sort order. It's required and can be either ASC and DESC.

    Usage

    First import the component into your project:

    import DynamicTable from '@wynsoft/dynamic-table';
    

    Now add the component to the app:

    <DynamicTable
        headers = {<headers-object>}
        data = {<data-object>}
        pageSize = {10},
        currentPage = {1},
        sortOn = "id",
        sortOrder = "ASC"
    >
    

    Demo

    https://wynsoft.ca/react/dynamic-table/

    Keywords

    none

    Install

    npm i @wynsoft/dynamic-table

    DownloadsWeekly Downloads

    3

    Version

    0.1.3

    License

    none

    Unpacked Size

    15.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • iamnopreacher