npmpackage.info

Gathering detailed insights and metrics for dp-data-table

dp-data-table - 3.0.0 | npmpackage.info

dp-data-table

Simple data table for react with filter and pagination options

3.0.0

JavaScript

324.57 kB

2.4

Installations

npm install dp-data-table

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

20.17.0

NPM Version

10.8.2 Pull Requests

Open

0

Total

1

Closed

0

Merged

1

Issues

Open

0

Total

0

Closed

0

Releases

v3.0.0

Updated on Oct 16, 2024

View All 1 releases

Languages

JavaScript

HTML

SCSS

JavaScript (92.62%)

HTML (4.71%)

SCSS (2.66%)

Developer

daniepaul

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

1 Stars

20 Commits

1 Forks

1 Watchers

2 Branches

1 Contributors

Updated on Oct 16, 2024

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

3.0.0

Package Id

dp-data-table@3.0.0

Unpacked Size

324.57 kB

Size

104.69 kB

File Count

NPM Version

10.8.2

Node Version

20.17.0

Published on

Oct 16, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

classnames lodash prop-types

Peer Dependencies

react react-dom

Dev Dependencies

dp-data-table

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

Screenshot

dp Data Table

Demo Link

Integration

Here is a sample integration:

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

React Integration:

1import React from 'react';
2import DpDataTable from 'dp-data-table';
3
4......
5
6<DataTable items={[.......]} />
7

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 sort`onDeleting({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;

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.4

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More