{"id":18860141,"url":"https://github.com/michaelsogos/bootstrap-table-toolbar-buttons","last_synced_at":"2026-02-08T18:30:16.065Z","repository":{"id":58231666,"uuid":"105436473","full_name":"michaelsogos/bootstrap-table-toolbar-buttons","owner":"michaelsogos","description":"Extension for bootstrap-table to add custom buttons to toolbar","archived":false,"fork":false,"pushed_at":"2017-10-01T12:33:24.000Z","size":9,"stargazers_count":5,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-30T21:04:37.605Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/michaelsogos.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}},"created_at":"2017-10-01T11:07:19.000Z","updated_at":"2024-09-10T18:03:40.000Z","dependencies_parsed_at":"2022-08-31T03:30:07.600Z","dependency_job_id":null,"html_url":"https://github.com/michaelsogos/bootstrap-table-toolbar-buttons","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelsogos%2Fbootstrap-table-toolbar-buttons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelsogos%2Fbootstrap-table-toolbar-buttons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelsogos%2Fbootstrap-table-toolbar-buttons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelsogos%2Fbootstrap-table-toolbar-buttons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michaelsogos","download_url":"https://codeload.github.com/michaelsogos/bootstrap-table-toolbar-buttons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239800487,"owners_count":19699127,"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":[],"created_at":"2024-11-08T04:21:49.221Z","updated_at":"2026-02-08T18:30:16.032Z","avatar_url":"https://github.com/michaelsogos.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"Custom Toolbar Buttons\n=======================\n\nThis is an extension of [Bootstrap table](http://bootstrap-table.wenzhixin.net.cn/) to add custom buttons to toolbar, close to default buttons like \"refresh\", \"column selector\", etc.\n\nFeatures\n-----\n- Add a custom button with specified icon that on click event call a custom function\n\nDemo\n-----\nSee it in action: [demo here](https://jsfiddle.net/michaelsogos/w112m1o3/)\n\nInstallation\n-----\n#### Bower\n\n```\nbower install bootstrap-table-toolbar-buttons\n```\n\nUsage\n-----\nInclude this extension after [Bootstrap-table](https://github.com/wenzhixin/bootstrap-table).\nIn case you use an AMD loader (like require.js) specify manually dependecies to jQuery, bootstrap and bootstrap-table (like shims in require.js).\n\n```html\n\u003cscript src=\"bootstrap-table-toolbar-buttons.js\"\u003e\u003c/script\u003e\n```\n\nSimple example:\n```html\n\u003cbody\u003e\n    \u003cdiv class=\"container\"\u003e\n      \u003cdiv class=\"row\"\u003e\n        \u003ctable id='grid'\u003e\n            \u003cthead\u003e\n              \u003ctr\u003e\n                \u003cth data-field='itemid'\u003eItem ID\u003c/th\u003e\n                \u003cth data-field='name'\u003eName\u003c/th\u003e\n                \u003cth data-field='price'\u003ePrice\u003c/th\u003e\n              \u003c/tr\u003e\n            \u003c/thead\u003e\n            \u003ctbody\u003e\n              \u003ctr\u003e\u003ctd\u003e1\u003c/td\u003e\u003ctd\u003eABC\u003c/td\u003e\u003ctd\u003e$1.00\u003c/td\u003e\u003c/tr\u003e\n              \u003ctr\u003e\u003ctd\u003e2\u003c/td\u003e\u003ctd\u003eDEF\u003c/td\u003e\u003ctd\u003e$2.00\u003c/td\u003e\u003c/tr\u003e\n              \u003ctr\u003e\u003ctd\u003e3\u003c/td\u003e\u003ctd\u003eGHI\u003c/td\u003e\u003ctd\u003e$3.00\u003c/td\u003e\u003c/tr\u003e\n              \u003ctr\u003e\u003ctd\u003e4\u003c/td\u003e\u003ctd\u003eXYZ\u003c/td\u003e\u003ctd\u003e$4.00\u003c/td\u003e\u003c/tr\u003e\n            \u003c/tbody\u003e\n        \u003c/table\u003e\n      \u003c/div\u003e  \n    \u003c/div\u003e\n  \n    \u003c!-- context menu --\u003e\n    \u003cul id=\"context-menu\" class=\"dropdown-menu\"\u003e\n        \u003cli data-item=\"edit\"\u003e\u003ca\u003eEdit\u003c/a\u003e\u003c/li\u003e\n        \u003cli data-item=\"delete\"\u003e\u003ca\u003eDelete\u003c/a\u003e\u003c/li\u003e\n        \u003cli data-item=\"action1\"\u003e\u003ca\u003eAction Here\u003c/a\u003e\u003c/li\u003e\n        \u003cli data-item=\"action2\"\u003e\u003ca\u003eAnd Action Here\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e  \n\n    \u003cdiv id=\"filters-dialog\" class=\"modal\" tabindex=\"-1\" role=\"dialog\"\u003e\n        \u003cdiv class=\"modal-dialog\"\u003e\n            \u003cdiv class=\"modal-content\"\u003e\n                \u003cdiv class=\"modal-header\"\u003e\n                    \u003cbutton type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"\u003e\u003cspan aria-hidden=\"true\"\u003e\u0026times;\u003c/span\u003e\u003c/button\u003e\n                    \u003ch4 class=\"modal-title \"\u003eTable Filters\u003c/h4\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"modal-body\"\u003e\n                    \u003cspan\u003eAdd here filter fields!\u003c/span\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"modal-footer\"\u003e\n                    \u003cbutton type=\"button\" class=\"btn btn-danger pull-left\"\u003eReset Filters\u003c/button\u003e\n                    \u003cbutton type=\"button\" class=\"btn btn-info\" data-dismiss=\"modal\"\u003eClose\u003c/button\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e    \n\n    \u003cscript\u003e\n    $(function() {\n        $('#grid').bootstrapTable({\n            showRefresh: true,\n            customToolbarButtons: [\n                {\n                    name: \"grid-filters\",\n                    title: \"Filters\",\n                    icon: \"glyphicon-filter\",\n                    callback: onShowFiltersDialog\n                }\n            ]\n        });\n    });\n\n    var onShowFiltersDialog = function(){\n        $('#filters-dialog').modal('show');\n    }\n    \u003c/script\u003e\n\u003c/body\u003e\n```\n\nOptions\n-----\n\n|Name                    |Type                 |Default   |Description|\n|------------------------|---------------------|----------|-----------|\n|customToolbarButtons    |Array                |[]        |An array of button object (see below).|\n\nButton object\n----\n\n|Name                    |Type                 |Default   |Description|\n|------------------------|---------------------|----------|-----------|\n|name                    |String               |undefined |The attribute NAME of the button. It must be unique else just one button will be rendered.|\n|title                   |String               |undefined |The attribute TITLE and ARIA-LABEL of the button.|\n|icon                    |String               |undefined |The css class name of the button (usually a glyphicon), it depend on the option *iconsPrefix*.|\n|callback                |Function             |undefined |The function will be called when user raise CLICK event to the button.|\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelsogos%2Fbootstrap-table-toolbar-buttons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaelsogos%2Fbootstrap-table-toolbar-buttons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelsogos%2Fbootstrap-table-toolbar-buttons/lists"}