React Grid 사용자 정의 아이콘
Ignite UI for React IgrGrid 아이콘은 노출된 API 메서드를 사용하여 다른 컬렉션 집합의 사용자 지정 아이콘을 사용하도록 사용자 지정할 수 있습니다.
registerIconFromTextregisterIconsetIconRef
아이콘을 등록하면 로컬로 캐시되므로 구성 요소 간에 재사용할 수 있으며, 이 아이콘은 이름과 컬렉션 이름으로 참조됩니다. 참조를 설정하면 해당 아이콘을 이름으로 참조할 때 어떤 아이콘, 어떤 컬렉션에서 사용되는지가 변경됩니다.
// Add a new 'material' icon called 'filter_list' from string
registerIconFromText("filter_list", '<svg>...</svg>', "material");
// Add a new 'material' icon called 'my-filter_list' from svg url
registerIcon("filter_list", "url" , "material")
// Sets the icon reference to the new registered icon.
setIconRef('filter_list', 'default', {
name: 'filter_list',
collection: 'material',
});
tsReact 사용자 정의 아이콘 예제
다음 샘플은 원래 재질 아이콘에서 사용자 정의 글꼴 멋진 svg 아이콘으로 전환하고 다시 재질로 전환하는 방법을 보여줍니다.
export const arrowDown = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96 365.7 96 64c0-17.7 14.3-32 32-32s32 14.3 32 32l0 301.7 32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 480c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-32 0zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-96 0zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32l160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-160 0zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32l224 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L320 96z"/></svg>';
export const arrowUp = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M151.6 42.4C145.5 35.8 137 32 128 32s-17.5 3.8-23.6 10.4l-88 96c-11.9 13-11.1 33.3 2 45.2s33.3 11.1 45.2-2L96 146.3 96 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-301.7 32.4 35.4c11.9 13 32.2 13.9 45.2 2s13.9-32.2 2-45.2l-88-96zM320 480l32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-32 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128l160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-160 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm0-128l224 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32z"/></svg>';
export const caretDown ='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>';
export const chevronRight = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>';
export const ellipsisRight = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"/></svg>';
export const eyeSlash = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/></svg>';
export const eye = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>';
export const fileExport = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 128-168 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l168 0 0 112c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zM384 336l0-48 110.1 0-39-39c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l80 80c9.4 9.4 9.4 24.6 0 33.9l-80 80c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l39-39L384 336zm0-208l-128 0L256 0 384 128z"/></svg>';
export const magnifyGlass = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>';
export const filter = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z"/></svg>';
export const thumbtack = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M32 32C32 14.3 46.3 0 64 0L320 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-29.5 0 11.4 148.2c36.7 19.9 65.7 53.2 79.5 94.7l1 3c3.3 9.8 1.6 20.5-4.4 28.8s-15.7 13.3-26 13.3L32 352c-10.3 0-19.9-4.9-26-13.3s-7.7-19.1-4.4-28.8l1-3c13.8-41.5 42.8-74.8 79.5-94.7L93.5 64 64 64C46.3 64 32 49.7 32 32zM160 384l64 0 0 96c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-96z"/></svg>';
export const thumbtackSlash = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L481.4 352c9.8-.4 18.9-5.3 24.6-13.3c6-8.3 7.7-19.1 4.4-28.8l-1-3c-13.8-41.5-42.8-74.8-79.5-94.7L418.5 64 448 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l29.5 0-6.1 79.5L38.8 5.1zM324.9 352L177.1 235.6c-20.9 18.9-37.2 43.3-46.5 71.3l-1 3c-3.3 9.8-1.6 20.5 4.4 28.8s15.7 13.3 26 13.3l164.9 0zM288 384l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96-64 0z"/></svg>';
export const xMark = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>';
tsexport class NwindDataItem {
public constructor(init: Partial<NwindDataItem>) {
Object.assign(this, init);
}
public ProductID: number;
public ProductName: string;
public SupplierID: number;
public CategoryID: number;
public QuantityPerUnit: string;
public UnitPrice: number;
public UnitsInStock: number;
public UnitsOnOrder: number;
public ReorderLevel: number;
public Discontinued: boolean;
public OrderDate: string;
public Rating: number;
public Locations: NwindDataItem_LocationsItem[];
}
export class NwindDataItem_LocationsItem {
public constructor(init: Partial<NwindDataItem_LocationsItem>) {
Object.assign(this, init);
}
public Shop: string;
public LastInventory: string;
}
export class NwindData extends Array<NwindDataItem> {
public constructor(items: Array<NwindDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new NwindDataItem(
{
ProductID: 1,
ProductName: `Chai`,
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: `10 boxes x 20 bags`,
UnitPrice: 18,
UnitsInStock: 39,
UnitsOnOrder: 30,
ReorderLevel: 10,
Discontinued: false,
OrderDate: `2012-02-12`,
Rating: 5,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Fun-Tasty Co.`,
LastInventory: `2018-06-12`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `2018-04-04`
})]
}),
new NwindDataItem(
{
ProductID: 2,
ProductName: `Chang`,
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: `24 - 12 oz bottles`,
UnitPrice: 19,
UnitsInStock: 17,
UnitsOnOrder: 40,
ReorderLevel: 25,
Discontinued: true,
OrderDate: `2003-03-17`,
Rating: 5,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Super Market`,
LastInventory: `2018-09-09`
})]
}),
new NwindDataItem(
{
ProductID: 3,
ProductName: `Aniseed Syrup`,
SupplierID: 1,
CategoryID: 2,
QuantityPerUnit: `12 - 550 ml bottles`,
UnitPrice: 10,
UnitsInStock: 13,
UnitsOnOrder: 70,
ReorderLevel: 25,
Discontinued: false,
OrderDate: `2006-03-17`,
Rating: 3,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `2018-04-04`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Street Market`,
LastInventory: `2018-12-12`
}),
new NwindDataItem_LocationsItem(
{
Shop: `24/7 Market`,
LastInventory: `2018-11-11`
})]
}),
new NwindDataItem(
{
ProductID: 4,
ProductName: `Chef Antons Cajun Seasoning`,
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: `48 - 6 oz jars`,
UnitPrice: 22,
UnitsInStock: 53,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: false,
OrderDate: `2016-03-17`,
Rating: 3,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Fun-Tasty Co.`,
LastInventory: `2018-06-12`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `2018-04-04`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Street Market`,
LastInventory: `2018-12-12`
})]
}),
new NwindDataItem(
{
ProductID: 5,
ProductName: `Chef Antons Gumbo Mix`,
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: `36 boxes`,
UnitPrice: 21.35,
UnitsInStock: 0,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: true,
OrderDate: `2011-11-11`,
Rating: 5,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Super Market`,
LastInventory: `2018-09-09`
})]
}),
new NwindDataItem(
{
ProductID: 6,
ProductName: `Grandmas Boysenberry Spread`,
SupplierID: 3,
CategoryID: 2,
QuantityPerUnit: `12 - 8 oz jars`,
UnitPrice: 25,
UnitsInStock: 0,
UnitsOnOrder: 30,
ReorderLevel: 25,
Discontinued: false,
OrderDate: `2017-12-17`,
Rating: 4,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Super Market`,
LastInventory: `2018-09-09`
})]
}),
new NwindDataItem(
{
ProductID: 7,
ProductName: `Uncle Bobs Organic Dried Pears`,
SupplierID: 3,
CategoryID: 7,
QuantityPerUnit: `12 - 1 lb pkgs.`,
UnitPrice: 30,
UnitsInStock: 150,
UnitsOnOrder: 30,
ReorderLevel: 10,
Discontinued: false,
OrderDate: `2016-07-17`,
Rating: 5,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Fun-Tasty Co.`,
LastInventory: `2018-06-12`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `2018-04-04`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Street Market`,
LastInventory: `2018-12-12`
})]
}),
new NwindDataItem(
{
ProductID: 8,
ProductName: `Northwoods Cranberry Sauce`,
SupplierID: 3,
CategoryID: 2,
QuantityPerUnit: `12 - 12 oz jars`,
UnitPrice: 40,
UnitsInStock: 6,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: false,
OrderDate: `2018-01-17`,
Rating: 4,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Fun-Tasty Co.`,
LastInventory: `2018-06-12`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `2018-04-04`
})]
}),
new NwindDataItem(
{
ProductID: 9,
ProductName: `Mishi Kobe Niku`,
SupplierID: 4,
CategoryID: 6,
QuantityPerUnit: `18 - 500 g pkgs.`,
UnitPrice: 97,
UnitsInStock: 29,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: true,
OrderDate: `2010-02-17`,
Rating: 4,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `2018-04-04`
})]
}),
new NwindDataItem(
{
ProductID: 10,
ProductName: `Ikura`,
SupplierID: 4,
CategoryID: 8,
QuantityPerUnit: `12 - 200 ml jars`,
UnitPrice: 31,
UnitsInStock: 31,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: false,
OrderDate: `2008-05-17`,
Rating: 3,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Wall Market`,
LastInventory: `2018-12-06`
})]
}),
new NwindDataItem(
{
ProductID: 11,
ProductName: `Queso Cabrales`,
SupplierID: 5,
CategoryID: 4,
QuantityPerUnit: `1 kg pkg.`,
UnitPrice: 21,
UnitsInStock: 22,
UnitsOnOrder: 30,
ReorderLevel: 30,
Discontinued: false,
OrderDate: `2009-01-17`,
Rating: 5,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Fun-Tasty Co.`,
LastInventory: `2018-06-12`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `2018-04-04`
})]
}),
new NwindDataItem(
{
ProductID: 12,
ProductName: `Queso Manchego La Pastora`,
SupplierID: 5,
CategoryID: 4,
QuantityPerUnit: `10 - 500 g pkgs.`,
UnitPrice: 38,
UnitsInStock: 86,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: false,
OrderDate: `2015-11-17`,
Rating: 3,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `2018-04-04`
})]
}),
new NwindDataItem(
{
ProductID: 13,
ProductName: `Konbu`,
SupplierID: 6,
CategoryID: 8,
QuantityPerUnit: `2 kg box`,
UnitPrice: 6,
UnitsInStock: 24,
UnitsOnOrder: 30,
ReorderLevel: 5,
Discontinued: false,
OrderDate: `2015-03-17`,
Rating: 2,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Super Market`,
LastInventory: `2018-09-09`
})]
}),
new NwindDataItem(
{
ProductID: 14,
ProductName: `Tofu`,
SupplierID: 6,
CategoryID: 7,
QuantityPerUnit: `40 - 100 g pkgs.`,
UnitPrice: 23.25,
UnitsInStock: 35,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: false,
OrderDate: `2017-06-17`,
Rating: 4,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `2018-04-04`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Street Market`,
LastInventory: `2018-12-12`
})]
}),
new NwindDataItem(
{
ProductID: 15,
ProductName: `Genen Shouyu`,
SupplierID: 6,
CategoryID: 2,
QuantityPerUnit: `24 - 250 ml bottles`,
UnitPrice: 15.5,
UnitsInStock: 39,
UnitsOnOrder: 30,
ReorderLevel: 5,
Discontinued: false,
OrderDate: `2014-03-17`,
Rating: 4,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Local Market`,
LastInventory: `2018-07-03`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Wall Market`,
LastInventory: `2018-12-06`
})]
}),
new NwindDataItem(
{
ProductID: 16,
ProductName: `Pavlova`,
SupplierID: 7,
CategoryID: 3,
QuantityPerUnit: `32 - 500 g boxes`,
UnitPrice: 17.45,
UnitsInStock: 29,
UnitsOnOrder: 30,
ReorderLevel: 10,
Discontinued: false,
OrderDate: `2018-03-28`,
Rating: 2,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `2018-04-04`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Street Market`,
LastInventory: `2018-12-12`
}),
new NwindDataItem_LocationsItem(
{
Shop: `24/7 Market`,
LastInventory: `2018-11-11`
})]
}),
new NwindDataItem(
{
ProductID: 17,
ProductName: `Alice Mutton`,
SupplierID: 7,
CategoryID: 6,
QuantityPerUnit: `20 - 1 kg tins`,
UnitPrice: 39,
UnitsInStock: 0,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: true,
OrderDate: `2015-08-17`,
Rating: 2,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Farmer Market`,
LastInventory: `2018-04-04`
})]
}),
new NwindDataItem(
{
ProductID: 18,
ProductName: `Carnarvon Tigers`,
SupplierID: 7,
CategoryID: 8,
QuantityPerUnit: `16 kg pkg.`,
UnitPrice: 62.5,
UnitsInStock: 42,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: false,
OrderDate: `2005-09-27`,
Rating: 2,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `24/7 Market`,
LastInventory: `2018-11-11`
}),
new NwindDataItem_LocationsItem(
{
Shop: `Super Market`,
LastInventory: `2018-09-09`
})]
}),
new NwindDataItem(
{
ProductID: 19,
ProductName: `Teatime Chocolate Biscuits`,
SupplierID: 8,
CategoryID: 3,
QuantityPerUnit: ``,
UnitPrice: 9.2,
UnitsInStock: 25,
UnitsOnOrder: 30,
ReorderLevel: 5,
Discontinued: false,
OrderDate: `2001-03-17`,
Rating: 2,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Local Market`,
LastInventory: `2018-07-03`
})]
}),
new NwindDataItem(
{
ProductID: 20,
ProductName: `Sir Rodneys Marmalade`,
SupplierID: 8,
CategoryID: 3,
QuantityPerUnit: `4 - 100 ml jars`,
UnitPrice: 4.5,
UnitsInStock: 40,
UnitsOnOrder: 30,
ReorderLevel: 0,
Discontinued: false,
OrderDate: `2005-03-17`,
Rating: 5,
Locations: [
new NwindDataItem_LocationsItem(
{
Shop: `Super Market`,
LastInventory: `2018-09-09`
})]
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts";
import { IgrGridModule, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarAdvancedFiltering, IgrGridToolbarExporter, IgrGridToolbarHiding, IgrGridToolbarPinning } from "@infragistics/igniteui-react-grids";
import { IgrGrid, IgrPinningConfig, RowPinningPosition, IgrActionStrip, IgrGridPinningActions, IgrGridEditingActions, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData';
import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
import { IgrButtonGroup, IgrComponentValueChangedEventArgs, IgrIcon, IgrIconMeta, IgrToggleButton, setIconRef, registerIconFromText } from "@infragistics/igniteui-react";
import { arrowDown, arrowUp, caretDown, chevronRight, ellipsisRight, eye, eyeSlash, fileExport, filter, magnifyGlass, thumbtack, thumbtackSlash, xMark } from './icons';
const mods: any[] = [
IgrGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private grid: IgrGrid
private iconInstance: IgrIcon;
private gridRef(r: IgrGrid) {
this.grid = r;
this.setState({});
}
public onSelect(_buttonGroup: IgrButtonGroup, args: IgrComponentValueChangedEventArgs) {
this.changeRefs(args.detail);
}
private changeRefs(collectionName: string) {
setIconRef('arrow_drop_down', 'default', {
name: 'arrow_drop_down',
collection: collectionName,
});
setIconRef('file_download', 'default', {
name: 'file_download',
collection: collectionName,
});
setIconRef('clear', 'default', {
name: 'clear',
collection: collectionName,
});
setIconRef('chevron_right', 'default', {
name: 'chevron_right',
collection: collectionName,
});
setIconRef('search', 'default', {
name: 'search',
collection: collectionName,
});
setIconRef('hide', 'default', {
name: 'visibility_off',
collection: collectionName,
});
setIconRef('show', 'default', {
name: 'visibility',
collection: collectionName,
});
setIconRef('unpin', 'default', {
name: 'unpin-left',
collection: collectionName === "material" ? "imx-icons" : collectionName,
});
setIconRef('pin', 'default', {
name: 'pin-left',
collection: collectionName === "material" ? "imx-icons" : collectionName,
});
setIconRef('filter_list', 'default', {
name: 'filter_list',
collection: collectionName,
});
setIconRef('sort_asc', 'default', {
name: 'arrow_upward',
collection: collectionName,
});
setIconRef('more_vert', 'default', {
name: 'more_vert',
collection: collectionName,
});
setIconRef('sort_desc', 'default', {
name: 'arrow_downward',
collection: collectionName,
});
}
constructor(props: any) {
super(props);
this.gridRef = this.gridRef.bind(this);
this.onSelect = this.onSelect.bind(this);
registerIconFromText("filter_list", filter, "fontAwesome");
registerIconFromText("arrow_upward", arrowUp, "fontAwesome");
registerIconFromText("arrow_downward", arrowDown, "fontAwesome");
registerIconFromText("more_vert", ellipsisRight, "fontAwesome");
registerIconFromText("unpin-left", thumbtackSlash, "fontAwesome");
registerIconFromText("pin-left", thumbtack, "fontAwesome");
registerIconFromText("visibility", eye, "fontAwesome");
registerIconFromText("visibility_off", eyeSlash, "fontAwesome");
registerIconFromText("search", magnifyGlass, "fontAwesome");
registerIconFromText("chevron_right", chevronRight, "fontAwesome");
registerIconFromText("clear", xMark, "fontAwesome");
registerIconFromText("file_download", fileExport, "fontAwesome");
registerIconFromText("arrow_drop_down", caretDown, "fontAwesome");
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<IgrButtonGroup select={this.onSelect} style={{ width: 'fit-content' }}>
<IgrToggleButton value="material" key="material" selected>
<span key="text">Material Icons</span>
</IgrToggleButton>
<IgrToggleButton value="fontAwesome" key="awesome">
<span key="text">Font Awesome Icons</span>
</IgrToggleButton>
</IgrButtonGroup>
<div className="container fill">
<IgrGrid
autoGenerate={false}
ref={this.gridRef}
data={this.nwindData}
rowEditable={true}
allowFiltering={true}
filterMode="ExcelStyleFilter"
primaryKey="ProductID">
<IgrGridToolbar>
<IgrGridToolbarActions>
<IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>
<IgrGridToolbarHiding></IgrGridToolbarHiding>
<IgrGridToolbarPinning></IgrGridToolbarPinning>
<IgrGridToolbarExporter></IgrGridToolbarExporter>
</IgrGridToolbarActions>
</IgrGridToolbar>
<IgrColumn
name="ProductName"
field="ProductName"
header="Product Name" sortable={true}>
</IgrColumn>
<IgrColumn
name="UnitPrice"
field="UnitPrice"
header="Unit Price" sortable={true}>
</IgrColumn>
<IgrColumn
name="UnitsOnOrder"
field="UnitsOnOrder"
header="Units On Order" sortable={true}>
</IgrColumn>
<IgrColumn
name="UnitsInStock"
field="UnitsInStock"
header="Units In Stock" sortable={true}>
</IgrColumn>
<IgrColumn
name="QuantityPerUnit"
field="QuantityPerUnit"
header="Quantity Per Unit" sortable={true}>
</IgrColumn>
<IgrColumn
name="ReorderLevel"
field="ReorderLevel"
header="Reorder Level" sortable={true}>
</IgrColumn>
<IgrColumn
name="Discontinued"
field="Discontinued"
header="Discontinued" sortable={true}>
</IgrColumn>
</IgrGrid>
</div>
</div>
);
}
private _nwindData: NwindData = null;
public get nwindData(): NwindData {
if (this._nwindData == null) {
this._nwindData = new NwindData();
}
return this._nwindData;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample />);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
내부 아이콘
다음은 모든 내부 아이콘을 나열합니다. Alias는 참조할 수 있는 아이콘의 이름입니다. Target Icon은 내부 아이콘 이름이고, Target Collection은 아이콘이 내부적으로 등록된 컬렉션입니다.
| 별명 | 대상 아이콘 | 타겟 컬렉션 |
|---|---|---|
| add | add | material |
| add_child | 자식 추가 | imx-icons |
| add_row | 행 추가 | imx-icons |
| arrow_back | arrow_back | material |
| arrow_drop_down | arrow_drop_up | material |
| arrow_forward | arrow_forward | material |
| arrow_next | chevron_right | material |
| arrow_prev | chevron_left | material |
| case_sensitive | case-sensitive | imx-icons |
| carousel_next | arrow_forward | material |
| carousel_prev | arrow_back | material |
| chevron_left | chevron_left | material |
| chevron_right | chevron_right | material |
| 시계 | access_time | material |
| 닫다 | 닫다 | material |
| 무너지다 | 확장_없음 | material |
| 확인하다 | 확인하다 | material |
| date_range | date_range | material |
| 삭제하다 | delete | material |
| drag_indicator | drag_indicator | material |
| 편집하다 | 편집하다 | material |
| 오류 | 오류 | material |
| 넓히다 | 확장_자세히 | material |
| expand_more | 확장_자세히 | material |
| file_download | file_download | material |
| filter_all | 모두 선택 | imx-icons |
| filter_before | 이전-이전 | imx-icons |
| filter_contains | 포함 | imx-icons |
| filter_does_not_contain | 포함하지 않음 | imx-icons |
| filter_empty | 비어 있음 | imx-icons |
| filter_equal | 같음 | imx-icons |
| filter_false | 거짓입니다. | imx-icons |
| filter_greater_than | 보다 큼 | imx-icons |
| filter_greater_than_or_equal | 크거나 같음 | imx-icons |
| filter_in | IS-IN (인-인) | imx-icons |
| filter_last_month | 지난달 | imx-icons |
| filter_last_year | 지난해 | imx-icons |
| filter_less_than | 보다 작음 | imx-icons |
| filter_less_than_or_equal | 보다 작거나 같음 | imx-icons |
| filter_next_month | 다음 달 | imx-icons |
| filter_next_year | 내년 | imx-icons |
| filter_not_empty | 비어 있지 않음 | imx-icons |
| filter_not_equal | 같지 않음(not-equal) | imx-icons |
| filter_not_null | null이 아님 | imx-icons |
| filter_null | is-null (영문) | imx-icons |
| filter_starts_with | 다음으로 시작 | imx-icons |
| filter_this_month | 이달의 경우 | imx-icons |
| filter_this_year | 올해 | imx-icons |
| filter_today | 오늘 | imx-icons |
| filter_true | is-true (참) | imx-icons |
| filter_yesterday | 어제 | imx-icons |
| first_page | 첫 페이지 | material |
| group_work | 그룹 과제 | material |
| 숨기다 | 가시성_꺼짐 | material |
| import_export | 수입 수출 | material |
| input_collapse | arrow_drop_up | material |
| input_clear | 분명한 | material |
| input_expand | arrow_drop_down | material |
| jump_down | 점프 다운 | imx-icons |
| jump_up | 점프 업 | imx-icons |
| last_page | 마지막 페이지 | material |
| more_vert | more_vert | material |
| 다음 | navigate_next | material |
| 핀 | 핀 왼쪽 | imx-icons |
| 이전 | navigate_before | material |
| 리프레쉬 | 새로 고치다 | material |
| 제거하다 | 취소 | material |
| 검색 | 찾다 | material |
| 선택한 | 완료 | material |
| 보이다 | 시계 | material |
| sort_asc | arrow_upward | material |
| sort_desc | arrow_downward | material |
| 함수 | 함수 | material |
| table_rows | table_rows | material |
| 오늘 | calendar_today | material |
| tree_collapse | 확장_자세히 | material |
| tree_expand | chevron_right | material |
| unfold_less | 펼치지 않음 | material |
| unfold_more | unfold_more | material |
| 고정 해제 | 왼쪽 고정 해제 | imx-icons |
| view_column | view_column | material |
다음은 구성 요소에서 사용하는 모든 아이콘에 대한 분석입니다.
그리드
| 상 | 설명 |
|---|---|
| add | 필터 항목을 추가하기 위해 excel-filter 메뉴에서 사용됩니다. |
| arrow_back | 열을 뒤로 이동하기 위해 다양한 UI 요소에서 사용됩니다. |
| arrow_drop_down | 토글 가능한 메뉴를 나타내기 위해 다양한 버튼에 사용됩니다. |
| arrow_forward | 열을 앞으로 이동하기 위해 다양한 UI 요소에서 사용됩니다. |
| 취소 | 작업을 취소하기 위해 다양한 UI 요소에 사용됩니다. |
| chevron_right | Excel 스타일 필터링과 같이 확장 가능한 메뉴를 나타내는 데 사용됩니다. |
| 닫다 | 확장된 메뉴를 닫는 데 사용됩니다. |
| 확인하다 | 작업을 확인하는 데 사용됩니다. |
| drag_indicator | 항목을 끌 수 있음을 나타내는 핸들을 표시하는 데 사용됩니다. |
| 오류 | 잘못된 데이터 입력을 나타내기 위해 편집 가능한 셀에 사용됩니다. |
| expand_more | Excel 필터링 메뉴에서 더 많은 필터 추가를 나타내는 데 사용됩니다. |
| file_dowload | Excel 필터 내보내기에서 사용됩니다. |
| filter_* | 다양한 필터링 피연산자에 사용됩니다. |
| group_work | 그룹화 기준 끌어 놓기 영역에서 사용됩니다. |
| 숨기다 | 열을 숨기기 위해 다양한 UI 요소에서 사용됩니다. |
| import_export | 이동을 위해 피벗 데이터 선택기에서 사용됩니다. |
| input_clear | 입력 데이터를 지우기 위해 입력 필드에서 사용됩니다. |
| 다음 | 필터링 행 메뉴에서 칩 사이를 탐색하는 데 사용됩니다. |
| 핀 | 열 고정을 위해 다양한 UI 요소에서 사용됩니다. |
| 이전 | 필터링 행 메뉴에서 칩 사이를 탐색하는 데 사용됩니다. |
| 제거하다 | 다양한 UI 요소에서 제거 표시기로 사용됩니다. |
| 리프레쉬 | 필터링 행 메뉴에서 필터를 다시 로드하는 데 사용됩니다. |
| 선택한 | 활성 선택을 나타내기 위해 다양한 UI 요소에서 사용됩니다. |
| 보이다 | 열을 표시하기 위해 다양한 UI 요소에서 사용됩니다. |
| sort_asc | 정렬 방향을 나타내기 위해 다양한 UI 요소에서 사용됩니다. |
| sort_desc | 정렬 방향을 나타내기 위해 다양한 UI 요소에서 사용됩니다. |
| 함수 | 피벗 그리드 및 데이터 선택기에서 사용됩니다. |
| table_rows | 피벗 그리드 데이터 선택기에서 사용됩니다. |
| tree_collapse | 나무와 같은 구조에서 세부 정보를 덜 표시하는 데 사용됩니다. |
| tree_expand | 나무와 같은 구조에서 더 많은 세부 정보를 표시하는 데 사용됩니다. |
| 고정 해제 | 열 고정을 위해 다양한 UI 요소에서 사용됩니다. |
| unfold_less | 계층적 그리드에서 모든 행을 축소하는 데 사용됩니다. |
| unfold_more | 계층적 그리드에서 모든 행을 확장하는 데 사용됩니다. |
| view_column | 피벗 데이터 선택기에서 사용됩니다. |
페이지네이터
| 상 | 설명 |
|---|---|
| first_page | 첫 번째 페이지로 이동하는 데 사용되는 단추에서 사용됩니다. |
| last_page | 마지막 페이지로 이동하는 데 사용되는 단추에서 사용됩니다. |
| 이전 | 이전 페이지로 이동하는 데 사용되는 단추에서 사용됩니다. |
| 다음 | 다음 페이지로 이동하는 데 사용되는 단추에서 사용됩니다. |
액션 스트립
| 상 | 설명 |
|---|---|
| add_child | 팝업 메뉴에서 사용됩니다. |
| add_row | 팝업 메뉴에서 사용됩니다. |
| more_vert | 팝업 메뉴에서 사용됩니다. |
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.