아이콘으로 아름다운 부트스트랩 데이터 테이블을 만드는 방법
13907 단어 codenewbiewebdevbootstrap5
대비를 사용하여 반응으로 데이터 테이블을 만드는 방법
DataTables는 검색, 정렬 및 페이지 매김과 같은 고급 옵션과 테이블을 혼합하는 구성 요소입니다. 오늘 우리는 Contrast로 알려진 반응 라이브러리를 사용하여 반응으로 DataTable을 생성할 것입니다. CDBReact라고도 하는 Contrast는 모바일 우선, 반응형 웹 사이트 및 웹 앱을 구축하기 위한 재사용 가능한 구성 요소가 있는 완전한 부트스트랩 지원이 포함된 우아한 UI 키트인 반응 라이브러리입니다.
전제 조건
반응 부트스트랩 DataTables는 React, Bootstrap 및 CDBReact를 사용하여 빌드됩니다. CDBReact에 대한 사전 지식이 없어도 되지만 다음 사항이 필요합니다.
우리가 만들 DataTable은 아래와 같습니다
.설정
먼저 노드가 설치되어 있는지 확인하십시오. 이렇게 하려면 터미널에서 다음 명령을 실행합니다.
node -v그러면 컴퓨터에 설치된 노드의 현재 버전이 표시됩니다. node.js가 설치되어 있지 않으면 여기에서 다운로드하십시오. 노드를 설치하면 PC에도 npm이 설치되지만 여전히
npm-v를 사용하여 확인할 수 있습니다. 이제 노드가 설치되었으므로 선택한 디렉토리로 이동하여 다음을 실행하여 React 프로젝트를 시작할 수 있습니다.
npx create-react-app datatables-app
나는 프로젝트 이름을
datatables-app 로 지정했지만 원하는 이름을 사용할 수 있습니다.CDBReact 설치
이제 프로젝트에 CDBReact를 설치해야 합니다. 다음 명령을 실행하여 CBDReact를 설치합니다.
암호:
npm install --save ./path-to-the-cdbreact-pro-tgz-file
또는 원사 사용
암호:
yarn add ./path-to-the-cdbreact-pro-tgz-file
부트스트랩을 설치하거나 프로젝트의 아무 곳에나 추가할 필요가 없습니다. 설치 시 CDBReact가 자동으로 수행하기 때문입니다. 이제
npm start를 실행하여 모든 것이 잘 작동하고 오류가 없는지 확인하십시오.데이터 테이블
이 단계에서 가장 먼저 할 일은 데이터 테이블 기본 코드를 저장할 파일을 만드는 것입니다. 파일 이름을 DataTable.js로 지정했습니다. 물론 원하는 대로 이름을 지정할 수 있습니다. 파일에서 대조 및 반응에서 일부 데이터 테이블 구성 요소를 가져옵니다.
암호:
import React from "react";
import {
CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer
} from "cdbreact-pro";
위의 코드에서 우리는 dataTable을 구축하는 데 중요한 대비에서 일부 구성 요소를 가져왔습니다. 이들은 구성 요소입니다
암호:
const DataTable = () => {
function testClickEvent(param) {
alert('Row Click Event');
}
const data = () => {
return {
columns: [
{
label: 'Name',
field: 'name',
width: 150,
attributes: {
'aria-controls': 'DataTable',
'aria-label': 'Name',
},
},
{
label: 'Position',
field: 'position',
width: 270,
},
{
label: 'Office',
field: 'office',
width: 200,
},
{
label: 'Age',
field: 'age',
sort: 'asc',
width: 100,
},
{
label: 'Start date',
field: 'date',
sort: 'disabled',
width: 150,
},
{
label: 'Salary',
field: 'salary',
sort: 'disabled',
width: 100,
},
],
rows: [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: '61',
date: '2011/04/25',
salary: '$320',
clickEvent: () => testClickEvent(1),
},
{
name: 'Garrett Winters',
position: 'Accountant',
office: 'Tokyo',
age: '63',
date: '2011/07/25',
salary: '$170',
},
{
name: 'Ashton Cox',
position: 'Junior Technical Author',
office: 'San Francisco',
age: '66',
date: '2009/01/12',
salary: '$86',
},
{
name: 'Cedric Kelly',
position: 'Senior Javascript Developer',
office: 'Edinburgh',
age: '22',
date: '2012/03/29',
salary: '$433',
},
{
name: 'Airi Satou',
position: 'Accountant',
office: 'Tokyo',
age: '33',
date: '2008/11/28',
salary: '$162',
},
{
name: 'Brielle Williamson',
position: 'Integration Specialist',
office: 'New York',
age: '61',
date: '2012/12/02',
salary: '$372',
},
{
name: 'Herrod Chandler',
position: 'Sales Assistant',
office: 'San Francisco',
age: '59',
date: '2012/08/06',
salary: '$137',
},
{
name: 'Rhona Davidson',
position: 'Integration Specialist',
office: 'Tokyo',
age: '55',
date: '2010/10/14',
salary: '$327',
},
{
name: 'Colleen Hurst',
position: 'Javascript Developer',
office: 'San Francisco',
age: '39',
date: '2009/09/15',
salary: '$205',
},
{
name: 'Sonya Frost',
position: 'Software Engineer',
office: 'Edinburgh',
age: '23',
date: '2008/12/13',
salary: '$103',
},
{
name: 'Jena Gaines',
position: 'Office Manager',
office: 'London',
age: '30',
date: '2008/12/19',
salary: '$90',
},
{
name: 'Quinn Flynn',
position: 'Support Lead',
office: 'Edinburgh',
age: '22',
date: '2013/03/03',
salary: '$342',
},
{
name: 'Charde Marshall',
position: 'Regional Director',
office: 'San Francisco',
age: '36',
date: '2008/10/16',
salary: '$470',
},
{
name: 'Haley Kennedy',
position: 'Senior Marketing Designer',
office: 'London',
age: '43',
date: '2012/12/18',
salary: '$313',
},
{
name: 'Tatyana Fitzpatrick',
position: 'Regional Director',
office: 'London',
age: '19',
date: '2010/03/17',
salary: '$385',
},
{
name: 'Michael Silva',
position: 'Marketing Designer',
office: 'London',
age: '66',
date: '2012/11/27',
salary: '$198',
},
{
name: 'Paul Byrd',
position: 'Chief Financial Officer (CFO)',
office: 'New York',
age: '64',
date: '2010/06/09',
salary: '$725',
},
{
name: 'Gloria Little',
position: 'Systems Administrator',
office: 'New York',
age: '59',
date: '2009/04/10',
salary: '$237',
},
{
name: 'Bradley Greer',
position: 'Software Engineer',
office: 'London',
age: '41',
date: '2012/10/13',
salary: '$132',
},
{
name: 'Dai Rios',
position: 'Personnel Lead',
office: 'Edinburgh',
age: '35',
date: '2012/09/26',
salary: '$217',
},
{
name: 'Jenette Caldwell',
position: 'Development Lead',
office: 'New York',
age: '30',
date: '2011/09/03',
salary: '$345',
},
{
name: 'Yuri Berry',
position: 'Chief Marketing Officer (CMO)',
office: 'New York',
age: '40',
date: '2009/06/25',
salary: '$675',
},
{
name: 'Caesar Vance',
position: 'Pre-Sales Support',
office: 'New York',
age: '21',
date: '2011/12/12',
salary: '$106',
},
{
name: 'Doris Wilder',
position: 'Sales Assistant',
office: 'Sidney',
age: '23',
date: '2010/09/20',
salary: '$85',
},
{
name: 'Angelica Ramos',
position: 'Chief Executive Officer (CEO)',
office: 'London',
age: '47',
date: '2009/10/09',
salary: '$1',
},
{
name: 'Gavin Joyce',
position: 'Developer',
office: 'Edinburgh',
age: '42',
date: '2010/12/22',
salary: '$92',
},
{
name: 'Jennifer Chang',
position: 'Regional Director',
office: 'Singapore',
age: '28',
date: '2010/11/14',
salary: '$357',
},
{
name: 'Brenden Wagner',
position: 'Software Engineer',
office: 'San Francisco',
age: '28',
date: '2011/06/07',
salary: '$206',
},
{
name: 'Fiona Green',
position: 'Chief Operating Officer (COO)',
office: 'San Francisco',
age: '48',
date: '2010/03/11',
salary: '$850',
},
{
name: 'Shou Itou',
position: 'Regional Marketing',
office: 'Tokyo',
age: '20',
date: '2011/08/14',
salary: '$163',
},
{
name: 'Michelle House',
position: 'Integration Specialist',
office: 'Sidney',
age: '37',
date: '2011/06/02',
salary: '$95',
},
{
name: 'Suki Burks',
position: 'Developer',
office: 'London',
age: '53',
date: '2009/10/22',
salary: '$114',
},
{
name: 'Prescott Bartlett',
position: 'Technical Author',
office: 'London',
age: '27',
date: '2011/05/07',
salary: '$145',
},
{
name: 'Donna Snider',
position: 'Customer Support',
office: 'New York',
age: '27',
date: '2011/01/25',
salary: '$112',
},
],
};
};
return (
<CDBContainer>
<CDBCard>
<CDBCardBody>
<CDBDataTable
striped
bordered
hover
entriesOptions={[5, 20, 25]}
entries={5}
pagesAmount={4}
data={data()}
materialSearch={true}
/>
</CDBCardBody>
</CDBCard>
</CDBContainer>
);
};
export default DataTable;
Contrast의 다양한 구성 요소를 사용하여 위의 부트스트랩 Data 테이블을 만들었습니다. 또한 react Bootstrap 데이터 테이블을 보다 보기 쉽게 만드는 데 도움이 되도록 구성 요소에 일부 스타일을 추가했습니다. 아래 코드에서는
app.js 에서 데이터 테이블 구성 요소를 렌더링할 것입니다.암호:
import './App.css';
import DataTable from './DataTable';
import Reactdom from "react-dom";
function App() {
return (
<div className="App">
<DataTable />
</div>
);
}
export default App;
페이지는 아래 이미지와 같아야 합니다.
결론
Boostrap Datatable은 본 Contrast를 사용하여 쉽게 구축할 수 있습니다. 또한 부트스트랩을 설치하지 않고 부트스트랩 스타일 지정을 비롯한 여러 도구를 사용하여 부트스트랩 데이터 테이블 템플릿을 만들고 적합하게 만들 수 있습니다. CDBReact DataTable Docs에서 사용할 수 있는 다른 기능도 확인할 수 있습니다.
Reference
이 문제에 관하여(아이콘으로 아름다운 부트스트랩 데이터 테이블을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/devwares/how-to-create-a-beautiful-bootstrap-datatable-with-icons-3jb2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
