{"id":21944523,"url":"https://github.com/torrobinson/datatables-contextual-actions","last_synced_at":"2025-04-22T21:05:53.750Z","repository":{"id":60588459,"uuid":"249099936","full_name":"torrobinson/datatables-contextual-actions","owner":"torrobinson","description":"🖱️ A DataTables javascript plugin for adding context menus and buttons to your selected rows","archived":false,"fork":false,"pushed_at":"2024-03-26T18:29:30.000Z","size":106,"stargazers_count":17,"open_issues_count":3,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-22T21:05:44.765Z","etag":null,"topics":["buttons","context","context-menu","contextual-options","datatable","datatables","datatables-contextual-actions","datatables-js-extension","datatables-plugin","jquery","menu","right-click"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/datatables-contextual-actions","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/torrobinson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-22T02:39:18.000Z","updated_at":"2025-01-08T18:52:50.000Z","dependencies_parsed_at":"2023-02-15T05:01:04.148Z","dependency_job_id":"d885f5cd-0d28-4fdc-99d6-17b0a4562744","html_url":"https://github.com/torrobinson/datatables-contextual-actions","commit_stats":{"total_commits":60,"total_committers":2,"mean_commits":30.0,"dds":0.01666666666666672,"last_synced_commit":"6b54e546c066d41a322ec4212266574021bd65c2"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torrobinson%2Fdatatables-contextual-actions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torrobinson%2Fdatatables-contextual-actions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torrobinson%2Fdatatables-contextual-actions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/torrobinson%2Fdatatables-contextual-actions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/torrobinson","download_url":"https://codeload.github.com/torrobinson/datatables-contextual-actions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250324692,"owners_count":21411946,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["buttons","context","context-menu","contextual-options","datatable","datatables","datatables-contextual-actions","datatables-js-extension","datatables-plugin","jquery","menu","right-click"],"created_at":"2024-11-29T04:16:33.958Z","updated_at":"2025-04-22T21:05:53.717Z","avatar_url":"https://github.com/torrobinson.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# datatables-contextual-actions\n\n## 👉[View Example](https://torrobinson.github.io/datatables-contextual-actions/docs/)👈\n\nA DataTables JS extension for adding contextual options to one or many selected rows. Ideal if you want synchronized buttons and context-menu actions defined in a single place.\n\n![Context Menu][contextmenu]\n\n![Button List][buttonlist]\n\n![Button List Icon Only][buttonlisticononly]\n\nThis will alter your DataTables table in the following ways:\n-\tYour actions will be rendered as a row of buttons above your table\n- Right-clicking a row will select it and present the user with a context menu of your actions\n\nBoth can be individually enabled/disabled.\n\n# Dependencies:\n\n- [DataTables](https://github.com/DataTables/DataTables), the world's most comprehensive jQuery-based table component\n\n# Getting Started:\n\n- Use [DataTables](https://datatables.net/) in your project\n- Include the javascript and css in your project:\n\n```html\n\u003c!-- For example, use a CDN: --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/datatables-contextual-actions@latest/dist/dataTables.contextualActions.min.css\"/\u003e\n\u003cscript src=\"https://unpkg.com/datatables-contextual-actions@latest/dist/dataTables.contextualActions.min.js\"\u003e\u003c/script\u003e\n```\n\n- Initialize with a configuration (see the `Configuration` section below)\n\n```javascript\n$(document).ready(function () {\n\t// Set up our table in standard DataTables fashion (with selection enabled)\n\tvar myTable = $('#dt').DataTable({\n\t\tselect: {\n\t\t\tstyle: 'os',\n\t\t\tselector: 'td:first-child',\n\t\t},\n\t});\n\n\t// And initialize our plugin.\n\tmyTable.contextualActions({\n\t\t// Configuration options as described above\n\t});\n});\n```\n\n\n# Configuration:\n\n## options\n\n| Property | Type | Description | Default |\n| -------------------------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |\n| **classes** | string[] | CSS classes to apply to both the dropdown-menu and the button container | `[]` |\n| **iconPrefix** | string | CSS class that icons will all start with.\u003cbr\u003eFor example, providing `'fas'` will default an icon to\u003cbr\u003e`\u003ci class=\"fas\"\u003e\u003c/i\u003e`\u003cbr\u003e\u003cbr\u003e...before it's assigned its actual icon class. | `''` |\n| **contextMenu** | **contextMenu** (see below) | | required |\n| **showConfirmationMethod** | function(confirmation) | A function taking in a `confirmation` object (see the documentation on `item`'s `confirmation` attribute) that handles how to render and show the confirmation to the user. By default this uses the super basic `window.confirm` but the incoming `confirmation` parameter matches the config of BootBox, a plugin for showing confirmations using Bootstrap's modals. If using Bootbox, replace with `function(confirmation){bootbox.confirm(confirmation)}` | `function(confirmation){ confirmation.callback( window.confirm( confirmation.message)); }` |\n| **buttonList** | **buttonList** (see below) | | required |\n| **items** | **item**[] (see below) | An array of `item` objects that represent the options that will be both rendered as buttons, and as options in a context menu. | required |\n| **deselectAfterAction** | bool | Whether or not to deselect all table rows after an item's action takes place. Note: if your action's code clears and redraws the table anyway, the selection state will be lost regardless of this option. Modify row data in the table itself using the DataTables API if you don't want to accidentally lose the selection state. | true |\n\n## options.contextMenu\n\n| Property | Type | Description | Default |\n| ------------------ | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |\n| **enabled** | bool | Whether or not to display a context menu when the user right-clicks a row | `true` |\n| **isMulti** | bool | If true, multiple rows can be selected and then acted upon by right-clicking. If false, right-clicking will de-select all other rows before showing the context menu (default behaviour) | `false` |\n| **xoffset** | int | The horizontal distance away, in pixels, to render the drop-down context menu from the mouse | `-10` |\n| **yoffset** | int | The vertical distance away, in pixels, to render the drop-down context menu from the mouse | `-10` |\n| **showSpeed** | string | A CSS duration describing how quickly the context menu should displayed | `'0.30s'` |\n| **headerRenderer** | string\u003cbr\u003e*or*\u003cbr\u003efunction(rows)\u003cbr\u003e*or*\u003cbr\u003efalse (bool) | What to display as the context menu's header.\u003cbr\u003e\u003cbr\u003eCan be a static string or a function of the rows selected.\u003cbr\u003e\u003cbr\u003eSet to `false` to skip rendering a header. | `''` |\n| **headerIsFollowedByDivider** | bool | Controls if a divider is automatically added next to the header. (Ignored, if header is set to `false`.) | `false` |\n| **showStaticOptions** | bool | Whether or not to display `static` items in the context menu | `false` |\n| **startsNewSelection** | bool | Whether or not to start a new selection (deselect other rows) when `isMulti` is `true` and a non-selected row is right-clicked | `false` |\n\n## options.buttonList\n\n| Property | Type | Description | Default |\n| --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |\n| **enabled** | bool | Whether or not to render the options out into an external container as a series of button groups | `true` |\n| **containerSelector** | string | The CSS selector of the container element that the buttons will be rendered into.\u003cbr\u003e\u003cbr\u003eFor example, `'#my-button-bar'` | required |\n| **iconOnly** | bool | Whether or not to only display icons in the buttons.\u003cbr\u003e\u003cbr\u003eIf `true`, buttons will only contain icons, and the option titles are turned into tooltips. | `true` |\n| **disabledOpacity** | decimal | The opacity of a disabled button or context menu icon | `0.5` |\n| **dividerSpacing** | int | The number of pixels between divided groups of buttons | `10` |\n| **groupClass** | string | The class to give to the groups of buttons in the button list. Groups are the groupings of buttons separated with `divider` typed items. For example, with bootstrap, use `btn-group` | `` |\n\n## options.item[]\n\n| Property | Type | Description | Default |\n| ------------------------ | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |\n| **type** | string | \u003cbr\u003eItems can be of the following types:\u003cbr\u003e\u003cbr\u003e\u003cul\u003e\u003cbr\u003e\u003cli\u003e`option` is the standard type. It means the option is row-scoped and relies on row data to determine its `action`.\u003c/li\u003e\u003cbr\u003e\u003cbr\u003e\u003cli\u003e`static` means its action will not receive any data, and it mimics a DataTables button in that it is always visible and is table-scoped, not row-scoped.\u003c/li\u003e\u003cbr\u003e\u003cbr\u003e\u003cli\u003e`divider` acts simply as a divider item that splits up the above types when being rendered.\u003c/li\u003e\u003cbr\u003e\u003c/ul\u003e | required |\n| **multi** | bool | Whether or not to enable this button when more than 1 rows are selected | `false` |\n| **title** | string | \u003cbr\u003eWhat the option is named.\u003cbr\u003eThe title is rendered as:\u003cbr\u003e\u003cul\u003e\u003cbr\u003e\u003cli\u003eIn buttons: the button text\u003c/li\u003e\u003cbr\u003e\u003cli\u003eIn buttons when `iconOnly` is `true`: the button's tooltip\u003c/li\u003e\u003cbr\u003e\u003cbr\u003e\u003cli\u003eIn context menus: the dropdown option's text\u003c/li\u003e\u003cbr\u003e\u003cbr\u003e\u003cul\u003e | '' |\n| **multiTitle** | string | The `title` (above) to render when more than 1 rows are selected | '' |\n| **iconClass** | string | The class of the `\u003ci\u003e\u003c/i\u003e` styled icon to render.\u003cbr\u003eFor example, if `iconPrefix` is `'fa fa-fw'` and `iconClass` is `'fa-eye'`, then `\u003ci class=\"fa fa-fw fa-eye\"\u003e\u003c/i\u003e` is rendered.\u003cbr\u003e\u003cbr\u003eLeave blank to render no icon. | `''` |\n| **classes** | string[] | An array of CSS classes to add onto the rendered item (either the button or the\u003cbr\u003edropdown option) | `[]` |\n| **contextMenuClasses** | string[] | An array of CSS classes to add onto the rendered item (ONLY the\u003cbr\u003edropdown version) | `[]` |\n| **buttonClasses** | string[] | An array of CSS classes to add onto the rendered item (ONLY the button version) | `[]` |\n| **id** | string | Optionally you may assign an id to the item's rendered element if you wish to target it with any custom code later on | `''` |\n| **confirmation** | object\u003cbr\u003eor\u003cbr\u003efunction(rows) | The confirmation configuration object.\u003cbr\u003e\u003cbr\u003eInclude a `title` and a `message` that will appear in the default browser `confirm` dialogue\u003cbr\u003e\u003cbr\u003e**OR** you may provide a confirmation object that matches that of [Bootbox.js](http://bootboxjs.com/), and then override the default confirmation behavior by passing `bootbox.confirm` to `options.showConfirmationMethod` \u003cbr\u003e \u003cbr\u003eExample (default behavior):\u003cbr\u003e\u003cbr\u003e`{`\u003cbr\u003e`title:'Foo'`,\u003cbr\u003e`message:'Are you sure you want to Bar?'`\u003cbr\u003e`}`\u003cbr\u003e\u003cbr/\u003e\u003cbr\u003eExample (if using Bootbox):\u003cbr\u003e\u003cbr\u003e`{`\u003cbr\u003e` title: 'Delete Item(s)',`\u003cbr\u003e` message: 'Do you want to delete the item(s)?',`\u003cbr\u003e` buttons: {`\u003cbr\u003e` cancel: {`\u003cbr\u003e` className: 'btn-link',`\u003cbr\u003e` label: 'Cancel'`\u003cbr\u003e` },`\u003cbr\u003e` confirm: {`\u003cbr\u003e` className: 'btn-danger',`\u003cbr\u003e` label: 'Delete'`\u003cbr\u003e` }`\u003cbr\u003e`}` | `{}` |\n| **action** | function(rows) | The action to execute against the 1 or more `rows` selected when the action was executed | required |\n| **isDisabled** | bool\u003cbr\u003eor\u003cbr\u003efunction(row) | Whether or not to totally disable the option.\u003cbr\u003e\u003cbr\u003eIf a function of `row` is provided, this becomes a test to run against every selected row.\u003cbr\u003eIf ANY of the rows pass this test, the option will be disabled\u003cbr\u003e\u003cbr\u003eFor example, to disable the button for \"John\" rows:\u003cbr\u003e`(row) =\u003e row.FirstName === 'John'` | `{}` |\n| **isDisabledStrictMode** | bool | Modifies the behavior of `isDisabled` (see above). If specified and is `true`, then rather than allowing a `multi`-enabled button to be clicked when ANY selected row is enabled/applicable, ONLY enable the option if ALL selected rows are enabled/applicable. \u003cbr\u003e\u003cbr\u003e `isDisabledStrictMode` ensures that ALL selected rows fail the `isDisabled` check (in other words, are ALL enabled) before allowing an action to be confirmed or executed | `false` |\n| **isHidden** | bool\u003cbr\u003eor\u003cbr\u003efunction(row) | Similar to the above `isDisabled` but renders an option hidden/invisible instead of just being disabled (greyed out) | `{}` |\n\nPlease see the example page referred to above for a demo of how to use all these options together.\n\n# Refreshing:\n\nIf you change underlying data that some renderers rely on (`isDisabled` on a `static`-typed action, for example), and want to update the controls without having the user manually select/deselect rows, you can force-update contextualActions like so:\n\n```javascript\n$(document).ready(function () {\n\tvar myTable = $('#dt').DataTable({\n\t\t// ...\n\t});\n\n\t// And initialize our plugin.\n\tvar myContextActions = myTable.contextualActions({\n\t\t// ...\n\t});\n\n\t// Manually refresh the control and force all actions to be re-evaluated\n\tmyContextActions.update();\n});\n```\n\n[contextmenu]: https://github.com/torrobinson/datatables-contextual-actions/blob/master/resources/context-menu.png 'Context Menu'\n[buttonlist]: https://github.com/torrobinson/datatables-contextual-actions/blob/master/resources/buttons.png 'Button List'\n[buttonlisticononly]: https://github.com/torrobinson/datatables-contextual-actions/blob/master/resources/buttonIconOnly.png 'Button List Icon Only'\n\n# Development \u0026 Building:\n- Launch the included VSCode workspace file (`datatables-contextual-actions.code-workspace`)\n- Run `npm i` to install any dependencies\n- Perform any development and test in the `~/index.html` file\n- When you're ready to build, execute the default build task (`Ctrl + Shift + B`)\n- Test the built changes in the `~/docs/index.html` documentation/demo file","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorrobinson%2Fdatatables-contextual-actions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftorrobinson%2Fdatatables-contextual-actions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftorrobinson%2Fdatatables-contextual-actions/lists"}