수퍼리스트 모듈

SuperList 모듈은 몇 초 만에 프런트 엔드를 만드는 데 도움이 됩니다.

백엔드 API와 쉽게 통합하여 검색, 필터, 정렬 및 페이지 매기기

매끄럽고 깔끔한 디자인 및 응답성, MUI 기반

시작하기$ npm i @superalaa/superlist

import  SuperList  from  'SuperList';
import {data} from  './data.js'
function  App() {
    return (
    <>
        <SuperList  data={data}  />
    </>
    );
}
export  default  App; 

Live Exmaple in Code SandBox
API 문서를 이해하려면 data.js에서 편집해 보세요.

API 문서

이름
유형
설명


페이지 이름
끈
페이지 제목

페이지요약
끈
페이지 요약 또는 설명

기본 색상
끈
모듈의 기본 색상은 디자인을 테마에 더 잘 적응하도록 합니다. 예: primaryColor:"#673ab7"

searchAttributes
부울
검색창에서 필터 부분 활성화

검색제목
끈
사용자가 무엇을 검색하는지 도움이 되는 검색 입력 제목

searchNameQuery
끈
API 요청을 제출할 때 백엔드 목적으로 검색 필드 데이터는 searchNameQuery 속성이 있는 개체에 있습니다.

searchAttributesData
정렬
검색 표시줄의 필터 부분은 개체의 배열입니다. 예를 들어 개체에는 속성 이름, 레이블 및 select { name:"city",label:"City",options: [{ value: 'Alexandria', label: 'Alexandria ' },{ 값: '카이로', 라벨: '카이로' },]},

카테고리섹션
부울
특정 속성으로 모든 데이터를 필터링할 수 있는 페이지 왼쪽의 범주 섹션

categorySubHeader
끈
카테고리 섹션의 하위 헤더

카테고리
정렬
개체 배열 ; 개체 속성은 제목, 이름, 아이콘을 추가해야 하는 경우 bool 값이 있는 categoryIcon이고, Icon 소품은 Component를 사용하고, 중첩 속성은 메뉴를 하위 범주와 중첩하려는 경우 bool이고, subCategories 속성은 배열을 사용합니다. 매개변수가 같은 객체

종류
부울
목록을 정렬할 수 있습니다.

sortMenu
정렬
객체 배열 예: [ {title:"Amount High to Low",name:"amount",sort:"DESC"},{title:"Amount Low to High",name:"amount",sort:"ASC"}]

인쇄
부울
행을 인쇄해야 하는 경우

추가버튼제목
끈
추가 버튼 텍스트

addButtonOnClick 기능
기능
버튼을 클릭하면 원하는 모든 기능을 전달합니다.

headerItem
부울
레코드에 대한 헤더를 원하는 경우

headerItemComponent
JS 컴포넌트
헤더 구성 요소

listItemComponent
JS 컴포넌트
param props.content를 가져오는 레코드 구성 요소 디자인에는 레코드 데이터가 있습니다.

API
끈
백엔드 API는 모듈 검색, 정렬, 필터, 페이지 매김 데이터에서 발생하는 모든 쿼리 매개변수로 GET 요청을 생성합니다.

Express를 사용한 백엔드 예

    app.get('/invoices',async  function(req,res){
        let  query = req.query;
        const  limit = parseInt(req.query.limit)
        const  offset = parseInt(req.query.offset)
        let  filters = JSON.parse(query.filter)
        if (filters.client){
            filters.client = {[Op.like]:`%${filters.client}%`}
        }
        let  dbObj = {
            where:filters,
            limit,
            offset,
        }
        if(req.query.sort){
            let  sort = JSON.parse(query.sort);
            dbObj.order = [sort]
        }
        let {count,rows} = await models.invoices.findAndCountAll(dbObj);
        res.send({count,rows}).status(200);
})

NPM
GitHub