- Use the id and persistentState props to make the table remember states
- such as sorting, filtering, and visible columns, even after a page
- refresh.
-
- {t("table.cssCodeBlock.messages.note")} In this
- example, we are using custom class
- .vertical in our table. Replace it with class used
- in your table.
-
-
- }
- />
-
-
-
-
-
-
{t("table.cssCodeBlock.messages.addHorizontal")}
-
- {t("table.cssCodeBlock.messages.note")} In this
- example, we are using custom class
- .horizontal in our table. Replace it with class
- used in your table.
-
-
- }
- />
-
-
-
-
-
-
-
-
-
-
-
- {
- //your logic here
- // eslint-disable-next-line no-console
- console.log(rowData, "view action");
- },
- },
- {
- label: "Edit",
- disabled: true,
- onClick: (rowData) => {
- //your logic here
- // eslint-disable-next-line no-console
- console.log(rowData, "edit action");
- },
- },
- {
- label: "Share",
- disabled: (rowData) => {
- ///your logic here
- return rowData.id !== 11;
- },
- onClick: (rowData) => {
- //your logic here
- // eslint-disable-next-line no-console
- console.log(rowData, "share action");
- },
+ tooltip: true,
+ tooltipOptions: {
+ position: "top",
},
- {
- label: "Delete",
- className: "danger",
- onClick: (rowData) => {
- //your logic here
- // eslint-disable-next-line no-console
- console.log(rowData, "delete action");
- },
- requireConfirmationModal: true,
- confirmationOptions: {
- header: "Are you sure!",
- message: "You are going to delete this data.",
- },
+ },
+ {
+ accessorKey: "age",
+ tooltip: true,
+ tooltipOptions: {
+ position: "bottom",
},
- ],
- displayActions: (rowData) => {
- return rowData.id !== 12;
},
- }}
+ ]}
+ data={data.slice(0, 5)}
+ enableRowSelection={true}
initialSorting={[{ id: "email", desc: false }]}
+ >
+
@@ -532,6 +708,61 @@ export const TableDemo = () => {
}}
initialSorting={[{ id: "email", desc: false }]}
/>
+
@@ -554,6 +785,25 @@ export const TableDemo = () => {
}}
initialSorting={[{ id: "email", desc: false }]}
/>
+
@@ -576,6 +826,25 @@ export const TableDemo = () => {
}}
initialSorting={[{ id: "email", desc: false }]}
/>
+
@@ -591,7 +860,7 @@ export const TableDemo = () => {
onInputChange={(value) => {
column.setFilterValue(value);
}}
- placeholder={t("table.placeholder.search")}
+ placeholder={"Search"}
debounceTime={200}
>
),
@@ -604,6 +873,33 @@ export const TableDemo = () => {
data={data.slice(10, 15)}
initialSorting={[{ id: "email", desc: false }]}
>
+
@@ -616,147 +912,31 @@ export const TableDemo = () => {
meta: {
serverFilterFn: "equals",
},
- filterPlaceholder: t("table.placeholder.search"),
+ filterPlaceholder: "Search",
},
]}
fetchData={() => {}}
data={data.slice(10, 15)}
initialSorting={[{ id: "email", desc: false }]}
>
-
-
-
- "Quantity",
- enableSorting: true,
- dataType: "number",
- numberOptions: {
- locale: "en-IN",
- },
- enableColumnFilter: true,
- filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
- },
- {
- accessorKey: "amount",
- header: "Amount",
- dataType: "currency",
- enableSorting: true,
- numberOptions: {
- locale: "en-US",
- formatOptions: {
- currency: "EUR",
- },
- },
- enableColumnFilter: true,
- meta: {
- filterVariant: "range",
- },
- filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
- },
- {
- accessorKey: "date",
- header: "Date",
- dataType: "date",
- enableColumnFilter: true,
- enableSorting: true,
- filterPlaceholder: t("table.placeholder.date"),
- meta: {
- filterVariant: "dateRange",
- },
- },
- {
- accessorKey: "datetime",
- header: "Datetime",
- dataType: "datetime",
- enableColumnFilter: true,
- enableSorting: true,
- filterPlaceholder: t("table.placeholder.date"),
- meta: {
- filterVariant: "dateRange",
- },
- },
- {
- id: "action",
- header: () => ,
- dataType: "other",
- cell: () => (
-
- ),
- },
- ]}
- data={formatDemoData}
- paginated={false}
- initialSorting={[{ id: "quantity", desc: true }]}
- >
-
-
-
- "Quantity",
- enableSorting: true,
- dataType: "number",
- enableColumnFilter: true,
- filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
- },
- {
- accessorKey: "amount",
- header: "Amount",
- dataType: "currency",
- enableSorting: true,
- enableColumnFilter: true,
- meta: {
- filterVariant: "range",
- },
- filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
- },
- {
- accessorKey: "date",
- header: "Date",
- dataType: "date",
- enableColumnFilter: true,
- enableSorting: true,
- filterPlaceholder: t("table.placeholder.date"),
- meta: {
- filterVariant: "dateRange",
- },
- },
- {
- id: "action",
- header: () => ,
- dataType: "other",
- cell: () => (
-
- ),
- },
- ]}
- data={formatDemoData}
- paginated={false}
- customFormatters={{
- number: (value) => `~${value}`,
- currency: (value) => `$${value}`,
- }}
- initialSorting={[{ id: "quantity", desc: true }]}
- >
+
@@ -769,7 +949,7 @@ export const TableDemo = () => {
filterFn: "customEqualStringFilter",
enableColumnFilter: true,
enableSorting: true,
- filterPlaceholder: t("table.placeholder.search"),
+ filterPlaceholder: "Search",
},
{
accessorKey: "quantity",
@@ -780,7 +960,7 @@ export const TableDemo = () => {
locale: "en-IN",
},
enableColumnFilter: true,
- filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
+ filterPlaceholder: "Min,Max",
},
{
accessorKey: "amount",
@@ -797,7 +977,7 @@ export const TableDemo = () => {
meta: {
filterVariant: "range",
},
- filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
+ filterPlaceholder: "Min,Max",
},
{
accessorKey: "date",
@@ -819,7 +999,7 @@ export const TableDemo = () => {
])
}
value={(column.getFilterValue() as [Date, Date])?.[0]}
- placeholder={t("table.placeholder.startDate")}
+ placeholder={"Start date"}
/>
{
])
}
value={(column.getFilterValue() as [Date, Date])?.[1]}
- placeholder={t("table.placeholder.endDate")}
+ placeholder={"End date"}
/>
);
@@ -854,114 +1034,152 @@ export const TableDemo = () => {
}}
initialSorting={[{ id: "quantity", desc: true }]}
>
+
-
+ City,
- enableColumnFilter: true,
- enableSorting: true,
- filterPlaceholder: t("table.placeholder.select"),
- meta: {
- filterVariant: "multiselect",
- filterOptions: city,
- },
+ accessorKey: "type",
+ header: t("propertiesTable.header.type"),
},
{
- accessorKey: "country",
- header: "Country",
- enableColumnFilter: true,
- enableSorting: true,
- meta: {
- filterVariant: "select",
- filterOptions: country,
- },
- filterPlaceholder: t("table.placeholder.country"),
+ accessorKey: "default",
+ header: t("propertiesTable.header.default"),
},
{
- align: "center",
- accessorKey: "disabled",
- header: "Status",
- cell: ({ row: { original } }) => {
- const color = original.disabled ? "red" : "green";
-
- return (
-
- );
- },
- enableColumnFilter: true,
- enableSorting: true,
- filterFn: (row, columnId, filterValue) => {
- if (!filterValue || filterValue.length === 0) {
- return true;
- }
-
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const updatedFilterValue = filterValue.map((value: any) => {
- switch (value) {
- case "true":
- return true;
- case "false":
- return false;
- default:
- return value;
- }
- });
-
- const cellValue = row.getValue(columnId);
-
- return updatedFilterValue.includes(cellValue);
- },
- meta: {
- filterVariant: "multiselect",
- filterOptions: [
- {
- value: "false",
- label: "Enabled",
- },
- {
- value: "true",
- label: "Disabled",
- },
- ],
- },
- filterPlaceholder: t("table.placeholder.status"),
+ accessorKey: "description",
+ header: t("propertiesTable.header.description"),
},
]}
- data={data.slice(10, 15)}
- initialSorting={[{ id: "email", desc: false }]}
- >
+ data={propertiesData}
+ paginated={false}
+ />
);
diff --git a/apps/demo/src/Views/Ui/components/Table/data.ts b/apps/demo/src/Views/Ui/components/Table/data.ts
index e743d2a21..e6e21677b 100644
--- a/apps/demo/src/Views/Ui/components/Table/data.ts
+++ b/apps/demo/src/Views/Ui/components/Table/data.ts
@@ -8,7 +8,7 @@ export type TData = {
disabled?: boolean;
};
-const city = [
+const cities = [
{ value: "Atlanta", label: "Atlanta" },
{ value: "Austin", label: "Austin" },
{ value: "Boston", label: "Boston" },
@@ -31,7 +31,7 @@ const city = [
{ value: "Seattle", label: "Seattle" },
];
-const country = [
+const countries = [
{ label: "Estonia", value: "Estonia" },
{ label: "France", value: "France" },
{
@@ -324,8 +324,8 @@ const HORIZONTAL_CSS_CODE = `.dz-table-container.horizontal .table-wrapper > tab
}`;
export {
- city,
- country,
+ cities,
+ countries,
data,
formatDemoData,
HORIZONTAL_CSS_CODE,
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index bcb2a94f5..34d539fd3 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -36,7 +36,6 @@
"usage": {
"basic": "Basic",
"variant": "Variant",
- "severity": "Severity",
"size": "Size",
"outlined": "Outlined",
"icons": "Icons",
@@ -45,6 +44,22 @@
"link": "Link",
"tooltip": "Button with tooltip"
},
+ "propertiesDescription": {
+ "children": "The content to be displayed inside the button.",
+ "className": "Additional CSS classes to apply to the button.",
+ "disabled": "If true, the button will be disabled and non-interactive.",
+ "iconLeft": "Icon to be displayed on the left side of the button. Can be a string (class name) or a ReactNode.",
+ "iconRight": "Icon to be displayed on the right side of the button. Can be a string (class name) or a ReactNode.",
+ "label": "Text to be displayed in the button when `children` is not provided.",
+ "loading": "If true, indicates that the button is in a loading state and disables user interaction.",
+ "onClick": "Function to be called when the button is clicked.",
+ "severity": "Defines the styling severity of the button. Defaults to 'primary'.",
+ "size": "Sets the size of the button. Defaults to 'medium'.",
+ "to": "If provided, the button will act as a `Link` to the specified path instead of a regular button.",
+ "title": "Tooltip text that appears on hover.",
+ "variant": "Specifies the button variant. Defaults to 'filled'.",
+ "rounded": "Specifies the button border-radius to be rounded when set to `true`. Defaults to 'false'."
+ },
"message": "Click to view profile"
},
"checkboxInput": {
@@ -89,6 +104,12 @@
"data": {
"title": "Data",
"subtitle": "The Data component is a reusable React component designed to display a labeled value.",
+ "propertiesDescription": {
+ "caption": "The caption displayed alongside the value.",
+ "className": "Additional CSS classes to apply to the outer container.",
+ "mode": "Defines which styling to apply to the component.",
+ "value": "The value to display."
+ },
"usage": {
"basic": "Basic",
"mode": "Stat mode",
@@ -152,6 +173,11 @@
"title": "Responsive menu"
},
"submitButton": {
+ "propertiesDescription": {
+ "disabled": "If true, the button will be disabled and non-interactive.",
+ "label": "Text to be displayed in the button.",
+ "loading": "If true, indicates that the button is in a loading state and disables user interaction."
+ },
"title": "Submit button",
"usage": {
"basic": "Basic",
@@ -162,6 +188,15 @@
"title": "Youtube facade"
},
"exportButton": {
+ "propertiesDescription": {
+ "filename": "The filename to use for the exported XLSX file.",
+ "getData": "Function that returns the data to be exported in a 2D array format.",
+ "label": "Text displayed on the export button.",
+ "onExportEnd": "Callback function invoked when export ends.",
+ "onExportStart": "Callback function invoked when export starts.",
+ "sheetName": "The name of the worksheet within the XLSX file.",
+ "sheetOptions": "Additional worksheet options."
+ },
"title": "Export button"
},
"fileCard": {
@@ -174,7 +209,6 @@
"title": "Files presentation"
},
"table": {
- "title": "Table",
"cssCodeBlock": {
"title": "CSS code example",
"messages": {
@@ -183,33 +217,6 @@
"note": "Note:"
}
},
- "usage": {
- "basic": "Basic table",
- "builtInActionColumn": "Table demonstrating built in actions column use case",
- "cellDataFormatting": "Table demonstrating cell content formatting",
- "filterable": "Table with filterable column",
- "sortable": "Table with sortable column",
- "rowSelection": "Table with row selection",
- "persistentState": "Table with persistent state",
- "customCellDataFormatting": "Table with custom cell data formatter",
- "customPagination": "Table with custom pagination",
- "customToolbarActions": "Table with custom toolbar actions",
- "columnTooltip": "Table with tooltip column",
- "columnAlignment": "Table cell content alignments",
- "columnAction": "Table with column action",
- "withFooter": "Table with footer",
- "withoutPagination": "Table without pagination",
- "withTitle": "Table with title",
- "withCustomFilter": "Table with custom filter component and filterFn",
- "withEqualServerFilter": "Table with equal server filterFn",
- "customStaticFilter": "Table with custom filter component and static filterFn",
- "divContent": "Table demonstrating center aligned content",
- "singleActionColumn": "Table with single action button",
- "singleActionColumnWithMenu": "Table with single action menu",
- "rowSpecificActions": "Table with actions menu items filtered based on row data logic",
- "tableBorderHorizontal": "Table with custom style for horizontal border",
- "tableBorderVertical": "Table with custom style for vertical border"
- },
"placeholder": {
"country": "Select country",
"date": "Select date",
@@ -220,7 +227,58 @@
"search": "Search",
"select": "Select city",
"status": "Select status"
- }
+ },
+ "propertiesDescription": {
+ "className": "Additional CSS classes to apply to the table.",
+ "columnActionBtnLabel": "Label for the column action button.",
+ "customFormatters": "Custom functions to format data in specific columns.",
+ "dataActionsMenu": "Configuration or function to render row-specific action menus.",
+ "data": "The array of data records to be displayed in the table.",
+ "emptyTableMessage": "Message to display when there are no records in the table.",
+ "enableRowSelection": "Enables row selection functionality.",
+ "globalFilter": "Global filter.",
+ "id": "Unique identifier for the table instance.",
+ "initialFilters": "Initial column filter state applied to the table.",
+ "initialSorting": "Initial sorting state for the table.",
+ "isLoading": "Displays a loading icon.",
+ "inputDebounceTime": "Debounce time (in ms).",
+ "paginated": "Enables pagination for the table.",
+ "paginationOptions": "Additional props for the pagination component.",
+ "persistState": "Persist table state.",
+ "persistStateStorage": "Storage type to use when persisting table state.",
+ "resetStateActionBtnLabel": "Label for the reset state button in the table toolbar.",
+ "rowClassName": "Custom class name row.",
+ "rowPerPage": "Number of rows displayed per page.",
+ "rowPerPageOptions": "List of selectable options for rows per page.",
+ "showResetStateAction": "Button to reset the table state.",
+ "totalRecords": "Total number of records.",
+ "visibleColumns": "Array of columns that should be visible.",
+ "title": "Title of the table.",
+ "showColumnsAction": "Display column action.",
+ "fetchData": "Fetch table data.",
+ "handleResetState": "Callback triggered when reset state.",
+ "onRowSelectChange": "Callback triggered when selected rows change.",
+ "renderCustomPagination": "Custom pagination.",
+ "renderSortIcons": "Custom sort icon renderer for sortable columns.",
+ "renderTableFooterContent": "Custom table footer.",
+ "renderToolbarItems": "Custom toolbar items to display above the table."
+ },
+ "subtitle": "The Table component displays data in tabular format.",
+ "usage": {
+ "basic": "Basic table",
+ "cellDataFormatting": "Basic table(fr)",
+ "columnAction": "Table with column action",
+ "columnTooltip": "Table with tooltip column",
+ "customPaginationToolbarFooter": "Table with custom pagination, toolbar and footer",
+ "customStaticFilter": "Table with custom filter component and static filterFn",
+ "rowSelection": "Table with row selection",
+ "rowSpecificActions": "Table with actions menu items filtered based on row data logic",
+ "singleActionColumn": "Table with single action button",
+ "singleActionColumnWithMenu": "Table with single action menu",
+ "withCustomFilter": "Table with custom filter component and filterFn",
+ "withEqualServerFilter": "Table with equal server filterFn"
+ },
+ "title": "Table"
},
"message": {
"subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases.",
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index f556b9310..8434dc344 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -36,7 +36,6 @@
"usage": {
"basic": "Basic (fr)",
"variant": "Variant (fr)",
- "severity": "Severity (fr)",
"size": "Size (fr)",
"outlined": "Outlined (fr)",
"icons": "Icons (fr)",
@@ -45,6 +44,22 @@
"link": "Link (fr)",
"tooltip": "Button with tooltip (fr)"
},
+ "propertiesDescription": {
+ "children": "The content to be displayed inside the button. (fr)",
+ "className": "Additional CSS classes to apply to the button. (fr)",
+ "disabled": "If true, the button will be disabled and non-interactive. (fr)",
+ "iconLeft": "Icon to be displayed on the left side of the button. Can be a string (class name) or a ReactNode. (fr)",
+ "iconRight": "Icon to be displayed on the right side of the button. Can be a string (class name) or a ReactNode. (fr)",
+ "label": "Text to be displayed in the button when `children` is not provided. (fr)",
+ "loading": "If true, indicates that the button is in a loading state and disables user interaction. (fr)",
+ "onClick": "Function to be called when the button is clicked. (fr)",
+ "severity": "Defines the styling severity of the button. Defaults to 'primary'. (fr)",
+ "size": "Sets the size of the button. Defaults to 'medium'. (fr)",
+ "to": "If provided, the button will act as a `Link` to the specified path instead of a regular button. (fr)",
+ "title": "Tooltip text that appears on hover. (fr)",
+ "variant": "Specifies the button variant. Defaults to 'filled'. (fr)",
+ "rounded": "Specifies the button border-radius to be rounded when set to `true`. Defaults to 'false'. (fr)"
+ },
"message": "Click to view profile (fr)"
},
"checkboxInput": {
@@ -88,6 +103,12 @@
},
"data": {
"title": "Data (fr)",
+ "propertiesDescription": {
+ "caption": "The caption displayed alongside the value. (fr)",
+ "className": "Additional CSS classes to apply to the outer container. (fr)",
+ "mode": "Defines which styling to apply to the component. (fr)",
+ "value": "The value to display. (fr)"
+ },
"subtitle": "The Data component is a reusable React component designed to display a labeled value. (fr)",
"usage": {
"basic": "Basic (fr)",
@@ -152,6 +173,11 @@
"title": "Responsive menu (fr)"
},
"submitButton": {
+ "propertiesDescription": {
+ "disabled": "If true, the button will be disabled and non-interactive. (fr)",
+ "label": "Text to be displayed in the button. (fr)",
+ "loading": "If true, indicates that the button is in a loading state and disables user interaction. (fr)"
+ },
"title": "Submit button (fr)",
"usage": {
"basic": "Basic (fr)",
@@ -162,6 +188,15 @@
"title": "Youtube facade (fr)"
},
"exportButton": {
+ "propertiesDescription": {
+ "filename": "The filename to use for the exported XLSX file. (fr)",
+ "getData": "Function that returns the data to be exported in a 2D array format. (fr)",
+ "label": "Text displayed on the export button. (fr)",
+ "onExportEnd": "Callback function invoked when export ends. (fr)",
+ "onExportStart": "Callback function invoked when export starts. (fr)",
+ "sheetName": "The name of the worksheet within the XLSX file. (fr)",
+ "sheetOptions": "Additional worksheet options. (fr)"
+ },
"title": "Export button (fr)"
},
"fileCard": {
@@ -174,7 +209,6 @@
"title": "Files presentation (fr)"
},
"table": {
- "title": "Table (fr)",
"cssCodeBlock": {
"title": "CSS code example (fr)",
"messages": {
@@ -183,33 +217,6 @@
"note": "Note: (fr)"
}
},
- "usage": {
- "basic": "Basic table (fr)",
- "builtInActionColumn": "Table demonstrating built in actions column use case (fr)",
- "cellDataFormatting": "Table demonstrating cell content formatting (fr)",
- "filterable": "Table with filterable column (fr)",
- "sortable": "Table with sortable column (fr)",
- "rowSelection": "Table with row selection (fr)",
- "persistentState": "Table with persistent state (fr)",
- "customCellDataFormatting": "Table with custom cell data formatter (fr)",
- "customPagination": "Table with custom pagination (fr)",
- "customToolbarActions": "Table with custom toolbar actions (fr)",
- "columnTooltip": "Table with tooltip column (fr)",
- "columnAlignment": "Table cell content alignments (fr)",
- "columnAction": "Table with column action (fr)",
- "withFooter": "Table with footer (fr)",
- "withoutPagination": "Table without pagination (fr)",
- "withTitle": "Table with title (fr)",
- "withCustomFilter": "Table with custom filter component and filterFn (fr)",
- "withEqualServerFilter": "Table with equal server filterFn (fr)",
- "customStaticFilter": "Table with custom filter component and static filterFn (fr)",
- "divContent": "Table demonstrating center aligned content (fr)",
- "singleActionColumn": "Table with single action button (fr)",
- "singleActionColumnWithMenu": "Table with single action menu (fr)",
- "rowSpecificActions": "Table with actions menu items filtered based on row data logic (fr)",
- "tableBorderHorizontal": "Table with custom style for horizontal border (fr)",
- "tableBorderVertical": "Table with custom style for vertical border (fr)"
- },
"placeholder": {
"country": "Select country (fr)",
"date": "Select date (fr)",
@@ -220,7 +227,58 @@
"search": "Search (fr)",
"select": "Select city (fr)",
"status": "Select status (fr)"
- }
+ },
+ "propertiesDescription": {
+ "className": "Additional CSS classes to apply to the table. (fr)",
+ "columnActionBtnLabel": "Label for the column action button. (fr)",
+ "customFormatters": "Custom functions to format data in specific columns. (fr)",
+ "dataActionsMenu": "Configuration or function to render row-specific action menus. (fr)",
+ "data": "The array of data records to be displayed in the table. (fr)",
+ "emptyTableMessage": "Message to display when there are no records in the table. (fr)",
+ "enableRowSelection": "Enables row selection functionality. (fr)",
+ "globalFilter": "Global filter. (fr)",
+ "id": "Unique identifier for the table instance. (fr)",
+ "initialFilters": "Initial column filter state applied to the table. (fr)",
+ "initialSorting": "Initial sorting state for the table. (fr)",
+ "isLoading": "Displays a loading icon. (fr)",
+ "inputDebounceTime": "Debounce time (in ms). (fr)",
+ "paginated": "Enables pagination for the table. (fr)",
+ "paginationOptions": "Additional props for the pagination component. (fr)",
+ "persistState": "Persist table state. (fr)",
+ "persistStateStorage": "Storage type to use when persisting table state. (fr)",
+ "resetStateActionBtnLabel": "Label for the reset state button in the table toolbar. (fr)",
+ "rowClassName": "Custom class name row. (fr)",
+ "rowPerPage": "Number of rows displayed per page. (fr)",
+ "rowPerPageOptions": "List of selectable options for rows per page. (fr)",
+ "showResetStateAction": "Button to reset the table state. (fr)",
+ "totalRecords": "Total number of records. (fr)",
+ "visibleColumns": "Array of columns that should be visible. (fr)",
+ "title": "Title of the table. (fr)",
+ "showColumnsAction": "Display column action. (fr)",
+ "fetchData": "Fetch table data. (fr)",
+ "handleResetState": "Callback triggered when reset state. (fr)",
+ "onRowSelectChange": "Callback triggered when selected rows change. (fr)",
+ "renderCustomPagination": "Custom pagination. (fr)",
+ "renderSortIcons": "Custom sort icon renderer for sortable columns. (fr)",
+ "renderTableFooterContent": "Custom table footer. (fr)",
+ "renderToolbarItems": "Custom toolbar items to display above the table. (fr)"
+ },
+ "subtitle": "The Table component displays data in tabular format. (fr)",
+ "usage": {
+ "basic": "Basic table (fr)",
+ "cellDataFormatting": "Basic table(fr)",
+ "columnAction": "Table with column action (fr)",
+ "columnTooltip": "Table with tooltip column (fr)",
+ "customPaginationToolbarFooter": "Table with custom pagination, toolbar and footer (fr)",
+ "customStaticFilter": "Table with custom filter component and static filterFn (fr)",
+ "rowSelection": "Table with row selection (fr)",
+ "rowSpecificActions": "Table with actions menu items filtered based on row data logic (fr)",
+ "singleActionColumn": "Table with single action button (fr)",
+ "singleActionColumnWithMenu": "Table with single action menu (fr)",
+ "withCustomFilter": "Table with custom filter component and filterFn (fr)",
+ "withEqualServerFilter": "Table with equal server filterFn (fr)"
+ },
+ "title": "Table (fr)"
},
"message": {
"subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases. (fr)",