Custom Context Actions in DataTable Component

[alexdumea]

Package

@meteor/component-library

Browser

Chrome

Operating System

Windows

Package version

3.7.0

Assistive technology

No response

Description

Currently, the DataTable.vue component only supports enabling and disabling predefined context actions such as "Edit" and "Delete". However, there is a need to extend or overwrite these context actions with custom ones. For instance, instead of having "Edit" and "Delete", we need a custom label "View" that still triggers the same event (onOpenDetails).

Proposed Solution:
Introduce a new property rowContextActions to the DataTable.vue component. This property should accept an array of objects defining custom context actions. The proposed interface for these actions is as follows:

interface ContextActions {
	label: string
	onClick: (rowId: string) => void
	disabled?: boolean
	type?: "default" | "active" | "critical"
}

The rowContextActions property should be defined as:

rowContextActions: {
  type: Array as PropType<ContextActions[]>,
  required: false,
  default: () => [],
}

WCAG 2.1 Violation

No response

Steps to reproduce

Use mt-data-table component. You can't overwrite the context actions

Code of Conduct

• I have read and agree to follow Meteor's Code of Conduct