Wondering what’s next for npm?Check out our public roadmap! »

    @adler-it/webstack-datagrid
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    Classes

    SortConfig

    Construtor

    (id: string)

    FilterConfig

    Construtor

    (id: string)

    Method

    Name Arguments Return Type Description
    number FilterConfig Make it Number filter.
    date FilterConfig Make it Date filter.
    string FilterConfig Make it String filter.
    select (options: T[], value: (option: T) => string | number, label: (option: T) => string | number, multi: boolean) FilterConfig Make it select filter.
    autoComplete (options: T[], pathToValue: string, pathToText: string) FilterConfig Make it autocomplete filter.
    autoCompleteSimple (options: string[]) FilterConfig Make it autocomplete filter.

    DataGridConfig

    Constructor

    (selectable: boolean = false, multiSelectable: boolean = false, striped: boolean = false, hover: boolean = false)

    Method

    Name Arguments Return Type Description
    addColumn (label: string, style: object, value: (row: object) => string, sortConfig: SortConfig = false, filterConfig: FilterConfig = false) DataGridConfig Add column to dataGridConfig.
    addSpace (width: string) DataGridConfig Add blank column of given width.
    addButtonAction (onClick: (index: number, row: T) => void, element: JSX) DataGridConfig Add ActionButton to row.
    addTranslation (filter: string, sort: string, operation: string, value: string, values: string, ok: string, clear: string, close: string) DataGridConfig Add translation.

    Components

    DataGrid

    Properties

    Name Type Default Description
    rows* T[] Data to display.
    config* DataGridConfig DataGrid Config.
    actionPlacement string "left" Placement of action buttons in rows.
    paging { page: number, pageSize: number, count: number} Pagination to display.
    onUpdate* (paging, sort, filter) => void Update Callback.
    fetching boolean false Loading indication.
    pageSizes number[] [15,30,50,100] PageSize for Pagination.

    Usage

    import DataGrid, { DataGridConfig, FilterConfig, SortConfig } from '@adler-it/webstack-datagrid';
    import { IconButton } from 'material-ui';
    import Remove from 'material-ui/svg-icons/action/highlight-off';
    import moment from 'moment';
     
    const genders = [
        {
            id: 1,
            name: "female"
        },
        {
            id: 2,
            name: "male"
        }
    ]
     
    const data = [
        {
            _id: "7"
            firstName: "John",
            lastName: "Doe",
            birthday: "1993-06-16T00:00:00.000Z",
            gender: 1,
            mother: 5,
        },
        {
            _id: "5"
            firstName: "Jane",
            lastName: "Doe",
            birthday: "1970-06-16T00:00:00.000Z",
            gender: 2,
            mother: null,
        },...
    ]
     
    const lastNames = data.map(person => person.lastName);
    const config = new DataGridConfig(false, false, true, true)
        .addTranslation('Filter', 'Sort', 'Operation', 'Value', 'Values', 'OK', 'Clear', 'Close')
        .addColumn('ID', { width: '0px' }, row => row.id, new SortConfig('_id'), new FilterConfig('_id').number())
        .addColumn('First Name', { width: '90px' }, row => row.firstName, new SortConfig('firstName'), new FilterConfig('firstName').string())
        .addColumn('First Name', { width: '90px' }, row => row.firstName, new SortConfig('firstName'), new FilterConfig('firstName').autoCompleteSimple(lastNames))
        .addColumn('Birthday', { width: '50px' }, row => moment(row.birthday).format('DD.MM.YYYY'), false, new FilterConfig('birthday').date())
        .addColumn('Gender', {width: '0px'}, row => genders.find(item => item.id === row.gender), false, new FilterConfig('gender').select(genders, item => item.id, item => item.name, false))
        .addColumn('Mother', {width: '150px'}, row => data.find(item => item._id === row.mother), false, new FilterConfig('mother').autoComplete(data, item => item._id, item => `${item.firstName} ${item.lastName}`))
        .addButtonAction((index, item) => console.log('You clicked on row number ${index}, item with id ${item._id}', <IconButton><Remove /></IconButton>))
    ...
    render() {
        return (
            <div>
                <DataGrid
                    rows={data}
                    config={config}
                    onUpdate={(newState) => console.log(newState)}
                >
            </div>
        )
    }

    Install

    npm i @adler-it/webstack-datagrid

    DownloadsWeekly Downloads

    1

    Version

    1.0.8

    License

    ISC

    Last publish

    Collaborators

    • avatar