Skip to content

Commit

Permalink
Merge branch 'primefaces:master' into new-feature-primefaces#4134
Browse files Browse the repository at this point in the history
  • Loading branch information
@userkks
userkks authored Jun 3, 2023
2 parents 5989b84 + 0319232 commit afb1efa
Show file tree
Hide file tree
Showing 49 changed files with 3,138 additions and 436 deletions.
4 changes: 2 additions & 2 deletions components/doc/button/pt/ptdoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { DocSectionText } from '../../common/docsectiontext';
import { DocSectionCode } from '../../common/docsectioncode';
import { Button } from '../../../lib/button/Button';
import { DocSectionCode } from '../../common/docsectioncode';
import { DocSectionText } from '../../common/docsectiontext';

export function PTDoc(props) {
const code = {
Expand Down
873 changes: 854 additions & 19 deletions components/doc/common/apidoc/index.json
View file

Large diffs are not rendered by default.

268 changes: 268 additions & 0 deletions components/doc/datatable/pt/ptdoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,268 @@
import { useEffect, useState } from 'react';
import { ProductService } from '../../../../service/ProductService';
import { Column } from '../../../lib/column/Column';
import { DataTable } from '../../../lib/datatable/DataTable';
import { DocSectionCode } from '../../common/docsectioncode';
import { DocSectionText } from '../../common/docsectiontext';

export function PTDoc(props) {
const [products, setProducts] = useState([]);

useEffect(() => {
ProductService.getProductsMini().then((data) => setProducts(data));
}, []); // eslint-disable-line react-hooks/exhaustive-deps

const code = {
basic: `
<DataTable
value={products}
sortMode='multiple'
pt={{
table: { style: { minWidth: '50rem' } }
}}
>
<Column
field="code"
header="Code"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
<Column
field="name"
header="Name"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
<Column
field="category"
header="Category"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
<Column
field="quantity"
header="Quantity"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
</DataTable>
`,
javascript: `
import React, { useState, useEffect } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { ProductService } from './service/ProductService';
export default function PTDemo() {
const [products, setProducts] = useState([]);
useEffect(() => {
ProductService.getProductsMini().then(data => setProducts(data));
}, []);
return (
<DataTable
value={products}
sortMode='multiple'
pt={{
table: { style: { minWidth: '50rem' } }
}}
>
<Column
field="code"
header="Code"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
<Column
field="name"
header="Name"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
<Column
field="category"
header="Category"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
<Column
field="quantity"
header="Quantity"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
</DataTable>
</div>
);
}
`,
typescript: `
import React, { useState, useEffect } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { ProductService } from './service/ProductService';
interface Product {
id: string;
code: string;
name: string;
description: string;
image: string;
price: number;
category: string;
quantity: number;
inventoryStatus: string;
rating: number;
}
export default function PTDemo() {
const [products, setProducts] = useState<Product[]>([]);
useEffect(() => {
ProductService.getProductsMini().then(data => setProducts(data));
}, []);
return (
<DataTable
value={products}
sortMode='multiple'
pt={{
table: { style: { minWidth: '50rem' } }
}}
>
<Column
field="code"
header="Code"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
<Column
field="name"
header="Name"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
<Column
field="category"
header="Category"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
<Column
field="quantity"
header="Quantity"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
</DataTable>
</div>
);
}
`,
data: `
{
id: '1000',
code: 'f230fh0g3',
name: 'Bamboo Watch',
description: 'Product Description',
image: 'bamboo-watch.jpg',
price: 65,
category: 'Accessories',
quantity: 24,
inventoryStatus: 'INSTOCK',
rating: 5
},
...
`
};

return (
<>
<DocSectionText {...props}></DocSectionText>
<div className="card">
<DataTable
value={products}
sortMode="multiple"
pt={{
table: { style: { minWidth: '50rem' } }
}}
>
<Column
field="code"
header="Code"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
<Column
field="name"
header="Name"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
<Column
field="category"
header="Category"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
<Column
field="quantity"
header="Quantity"
sortable
pt={{
sortBadge: { className: 'bg-primary' },
headerCell: { style: { width: '25%' } }
}}
></Column>
</DataTable>
</div>
<DocSectionCode code={code} service={['ProductService']} />
</>
);
}
13 changes: 13 additions & 0 deletions components/doc/datatable/pt/wireframe.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';
import { DocSectionText } from '../../common/docsectiontext';

export const Wireframe = (props) => {
return (
<>
<DocSectionText {...props} />
<div>
<img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="datatable" />
</div>
</>
);
};
Loading

0 comments on commit afb1efa

Please sign in to comment.