Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@dsinnovators/multi-level-table
Advanced tools
Usage of MultiLevelTable is very easy. Just pass data to the table and define the structure of data and pass it through the structure prop. Add any actions for any object or multi-nested object.
Developed by Ishmum Jawad Khan
A Table is quite easy to build and render.
But complexity arises when a nested object is needed to be rendered in a table.
Further more complexity arrives when a semantic table is needed to build with pure
strategy.
Here comes MultiLevelTable developed in Dynamic Solution Innovators.
Usage of MultiLevelTable is very easy. Just pass data to the table and
define the structure of data and pass it through the structure prop.
Add any actions for any object or multi nested object.
npm install --save @dsinnovators/multi-level-table
const data = [
{
id: 1,
name: "Lorem University",
degrees: [
{
id: 1,
name: "B.Sc",
courses: [
{
id: 1,
name: "Computer Science and Engineering",
},
{
id: 2,
name: "Electrical and Electronics Engineering",
},
{
id: 3,
name: "Busniess Administration",
},
],
},
{
id: 2,
name: "M.Sc",
courses: [
{
id: 1,
name: "Computer Science and Engineering",
},
{
id: 2,
name: "Electrical and Electronics Engineering",
},
],
},
],
},
{
id: 2,
name: "Ipsum University",
degrees: [
{
id: 1,
name: "B.Sc",
courses: [
{
id: 1,
name: "Computer Science and Engineering",
},
{
id: 2,
name: "Busniess Administration",
},
],
},
{
id: 2,
name: "M.Sc",
courses: [
{
id: 1,
name: "Computer Science and Engineering",
},
],
},
],
},
];
const structure =
{
name: "institutions",
children: [{
field: "name",
display: "Institute"
}],
array: {
name: "degrees",
children: [{
field: "name",
display: "Degree"
}],
array: {
name: "courses",
children: [{
field: "name",
display: "Course"
}],
},
},
};
const actions =
[
{
name: "View Course Details",
callback: (value) => {
console.log("Course Details :", value);
},
},
{
name: "Students",
callback: (value) => {
console.log("Students:", value);
},
},
]
Custom CSS classNames
const className = {
table : 'w-full shadow-sm overflow-hidden rounded-lg text-center',
head : 'text-white bg-gray-700 text-center',
body : 'p-2 border-solid border border-light-blue-300'
}
import MultiLevelTable from '@dsinnovators/multi-level-table'
const ExamplePage = () => {
return <MultiLevelTable
data={data}
structure={structure}
actions={actions} //optional
actionLabel="Manage" //optional
className={className} //optional
/>
}
Parameter | Required | Description | Default | Type |
---|---|---|---|---|
data | true | fetch data from api or any static data | undefined | ArrayOf(object) |
structure | true | specify the structure of given data | undefined | object |
actions | false | takes array of object {name, callback}. add any actions for nested data | undefined | ArrayOf({ name: string, callback: func}) |
actionLabel | false | give action label for actions | Action | string |
className | false | takes a object {table, head, body}. pass CSS classNames to customize table | see above | {table: string, head: string, body: string} |
GNU General Public License v3.0
FAQs
Usage of MultiLevelTable is very easy. Just pass data to the table and define the structure of data and pass it through the structure prop. Add any actions for any object or multi-nested object.
The npm package @dsinnovators/multi-level-table receives a total of 2 weekly downloads. As such, @dsinnovators/multi-level-table popularity was classified as not popular.
We found that @dsinnovators/multi-level-table demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.