dp-data-table

dp Data Table is a simple ready to integrate component made in React using bootstrap styling.

Screenshot

Demo Link

Integration

Here is a sample integration:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="dist/dpDataTable.js"></script>
<script>
  window.RenderDpDataTable({
    selector: '#data-table-1',
    items: [.......]
  });
</script>

React Integration:

import React from 'react';
import DpDataTable from 'dp-data-table';

......

<DataTable items={[.......]} />

To have proper styling, include bootstrap.

Options

The options are passed in as props when used as a React component.

Option | Type | Description ----------|------------|------------ items | array | Collection of items to bind to the grid headers | array | array of keys and their matching Header names.[{'first_name' : 'First Name'}] hidePagination | boolean | Boolean to hide the pagination values. Setting this to true will show all items in same page. itemsPerPage | number | No of items per page. Default is 15. isLoading | boolean | Boolean to show the loading icon over the grid. iconClasses | object | An object with all the class names for the font icons used in the project. {LOADING: 'glyphicon glyphicon-refresh'}. Available options to override: LOADING, EDIT, DELETE, PAGE_PREV, PAGE_NEXT, FILTER, SORT_NONE, SORT_ASC, SORT_DESC
showFilter | boolean | Boolean to show the filter input filterableFields | array | Array of item property keys that can be made filterable. If not provided, all columns are filterable. onFiltering | function | Override function for filter. onFiltering({items, filterString}) showSort | boolean | Boolean to show column sort sortableFields | array | Array of column keys which can be sorted. showContextColor | boolean | Boolean to add context css to table row. Setting this to true will apply the __dp__contextCss property of item, to the row. onSorting | function | Override function to sortonDeleting({items, sortKey, sortOrder}) onEditing | function | Event handler for editing a row. The edit icon is enabled only when a function is supplied to this option.onEditing({item, index}) onDeleting | function | Event handler for deleting a row. The delete icon is enabled only when a function is supplied to this option.onDeleting({item, index}) onView | function | Event handler for viewing details of a row. The view icon is enabled only when a function is supplied to this option.onView({item, index}) onItemsChange | function | Event handler to get all changes that happen within the component. onItemChange(e)

Development

• Development server npm start.
• Continuously run tests on file changes npm run watch-test;
• Run tests: npm test;
• Build npm run build;