@@ -144,7 +145,7 @@
}")
)
)
-
+
-
-
-
+
+
diff --git a/articles/conditional-styling_files/htmltools-fill-0.5.8.1/fill.css b/articles/conditional-styling_files/htmltools-fill-0.5.8.1/fill.css
new file mode 100644
index 00000000..841ea9d5
--- /dev/null
+++ b/articles/conditional-styling_files/htmltools-fill-0.5.8.1/fill.css
@@ -0,0 +1,21 @@
+@layer htmltools {
+ .html-fill-container {
+ display: flex;
+ flex-direction: column;
+ /* Prevent the container from expanding vertically or horizontally beyond its
+ parent's constraints. */
+ min-height: 0;
+ min-width: 0;
+ }
+ .html-fill-container > .html-fill-item {
+ /* Fill items can grow and shrink freely within
+ available vertical space in fillable container */
+ flex: 1 1 auto;
+ min-height: 0;
+ min-width: 0;
+ }
+ .html-fill-container > :not(.html-fill-item) {
+ /* Prevent shrinking or growing of non-fill items */
+ flex: 0 0 auto;
+ }
+}
diff --git a/articles/conditional-styling_files/reactwidget-1.0.0/react-tools.js b/articles/conditional-styling_files/reactwidget-1.0.0/react-tools.js
deleted file mode 100644
index 871441a9..00000000
--- a/articles/conditional-styling_files/reactwidget-1.0.0/react-tools.js
+++ /dev/null
@@ -1,547 +0,0 @@
-/******/ (function(modules) { // webpackBootstrap
-/******/ // The module cache
-/******/ var installedModules = {};
-/******/
-/******/ // The require function
-/******/ function __webpack_require__(moduleId) {
-/******/
-/******/ // Check if module is in cache
-/******/ if(installedModules[moduleId]) {
-/******/ return installedModules[moduleId].exports;
-/******/ }
-/******/ // Create a new module (and put it into the cache)
-/******/ var module = installedModules[moduleId] = {
-/******/ i: moduleId,
-/******/ l: false,
-/******/ exports: {}
-/******/ };
-/******/
-/******/ // Execute the module function
-/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ // Flag the module as loaded
-/******/ module.l = true;
-/******/
-/******/ // Return the exports of the module
-/******/ return module.exports;
-/******/ }
-/******/
-/******/
-/******/ // expose the modules object (__webpack_modules__)
-/******/ __webpack_require__.m = modules;
-/******/
-/******/ // expose the module cache
-/******/ __webpack_require__.c = installedModules;
-/******/
-/******/ // define getter function for harmony exports
-/******/ __webpack_require__.d = function(exports, name, getter) {
-/******/ if(!__webpack_require__.o(exports, name)) {
-/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ }
-/******/ };
-/******/
-/******/ // define __esModule on exports
-/******/ __webpack_require__.r = function(exports) {
-/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ }
-/******/ Object.defineProperty(exports, '__esModule', { value: true });
-/******/ };
-/******/
-/******/ // create a fake namespace object
-/******/ // mode & 1: value is a module id, require it
-/******/ // mode & 2: merge all properties of value into the ns
-/******/ // mode & 4: return value when already ns object
-/******/ // mode & 8|1: behave like require
-/******/ __webpack_require__.t = function(value, mode) {
-/******/ if(mode & 1) value = __webpack_require__(value);
-/******/ if(mode & 8) return value;
-/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ var ns = Object.create(null);
-/******/ __webpack_require__.r(ns);
-/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ return ns;
-/******/ };
-/******/
-/******/ // getDefaultExport function for compatibility with non-harmony modules
-/******/ __webpack_require__.n = function(module) {
-/******/ var getter = module && module.__esModule ?
-/******/ function getDefault() { return module['default']; } :
-/******/ function getModuleExports() { return module; };
-/******/ __webpack_require__.d(getter, 'a', getter);
-/******/ return getter;
-/******/ };
-/******/
-/******/ // Object.prototype.hasOwnProperty.call
-/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ // __webpack_public_path__
-/******/ __webpack_require__.p = "";
-/******/
-/******/
-/******/ // Load entry module and return exports
-/******/ return __webpack_require__(__webpack_require__.s = "./srcjs/react-tools.js");
-/******/ })
-/************************************************************************/
-/******/ ({
-
-/***/ "./srcjs/input.js":
-/*!************************!*\
- !*** ./srcjs/input.js ***!
- \************************/
-/*! exports provided: reactShinyInput */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "reactShinyInput", function() { return reactShinyInput; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "react-dom");
-/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var shiny__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! shiny */ "shiny");
-/* harmony import */ var shiny__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(shiny__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! jquery */ "jquery");
-/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_3__);
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-
-
-
-
-/*
- * This default receiveMessage implementation expects data to contain whole
- * configuration and value properties. If either is present, it will be set and
- * the component will be re-rendered. Because receiveMessage is typically used
- * by input authors to perform incremental updates, this default implementation
- * can be overriden by the user with the receiveMessage arguments to
- * reactShinyInput.
- */
-
-function defaultReceiveMessage(el, _ref) {
- var configuration = _ref.configuration,
- value = _ref.value;
- var dirty = false;
-
- if (configuration !== undefined) {
- this.setInputConfiguration(el, configuration);
- dirty = true;
- }
-
- if (value !== undefined) {
- this.setInputValue(el, value);
- dirty = true;
- }
-
- if (dirty) {
- this.getCallback(el)();
- this.render(el);
- }
-}
-
-var defaultOptions = {
- receiveMessage: defaultReceiveMessage,
- type: false,
- ratePolicy: null
-};
-/**
- * Installs a new Shiny input binding based on a React component.
- *
- * @param {string} selector - jQuery selector that should identify the set of
- * container elements within the scope argument of Shiny.InputBinding.find.
- * @param {string} name - A name such as 'acme.FooInput' that should uniquely
- * identify the component.
- * @param {Object} component - React Component, either class or function.
- * @param {Object} options - Additional configuration options. Supported
- * options are:
- * - receiveMessage: Implementation of Shiny.InputBinding to use in place of
- * the default. Typically overridden as an optimization to perform
- * incremental value updates.
- * - type: `false`, a string, or a function.
- * - `false` (the default): denotes that the value produced by this input
- * should not be intercepted by any handlers registered in R on the
- * server using shiny::registerInputHandler().
- * - string: denotes the input's *type* and should correspond to the
- * type parameter of shiny::registerInputHandler().
- * - function: A function called with `this` bound to the InputBinding
- * instance and passed a single argument, the input's containing DOM
- * element. The function should return either `false` or a string
- * corresponding to the type parameter of shiny::registerInputHandler().
- * - ratePolicy: A rate policy object as defined in the documentation for
- * getRatePolicy(): https://shiny.rstudio.com/articles/building-inputs.html
- * A rate policy object has two members:
- * - `policy`: Valid values are the strings "direct", "debounce", and
- * "throttle". "direct" means that all events are sent immediately.
- * - `delay`: Number indicating the number of milliseconds that should be
- * used when debouncing or throttling. Has no effect if the policy is
- * direct.
- * The specified rate policy is only applied when `true` is passed as the
- * second argument to the `setValue` function passed as a prop to the
- * input component.
- *
- */
-
-function reactShinyInput(selector, name, component, options) {
- options = Object.assign({}, defaultOptions, options);
- shiny__WEBPACK_IMPORTED_MODULE_2___default.a.inputBindings.register(new ( /*#__PURE__*/function (_Shiny$InputBinding) {
- _inherits(_class, _Shiny$InputBinding);
-
- var _super = _createSuper(_class);
-
- function _class() {
- _classCallCheck(this, _class);
-
- return _super.apply(this, arguments);
- }
-
- _createClass(_class, [{
- key: "find",
-
- /*
- * Methods override those in Shiny.InputBinding
- */
- value: function find(scope) {
- return jquery__WEBPACK_IMPORTED_MODULE_3___default()(scope).find(selector);
- }
- }, {
- key: "getValue",
- value: function getValue(el) {
- return this.getInputValue(el);
- }
- }, {
- key: "setValue",
- value: function setValue(el, value) {
- var rateLimited = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-
- /*
- * We have to check whether $(el).data('callback') is undefined here
- * in case shiny::renderUI() is involved. If an input is contained in a
- * shiny::uiOutput(), the following strange thing happens occasionally:
- *
- * 1. setValue() is bound to an el in this.render(), below
- * 2. An event that will call setValue() is enqueued
- * 3. While the event is still enqueued, el is unbound and removed
- * from the DOM by the JS code associated with shiny::uiOutput()
- * - That code uses jQuery .html() in output_binding_html.js
- * - .html() removes el from the DOM and clears ist data and events
- * 4. By the time the setValue() bound to the original el is invoked,
- * el has been unbound and its data cleared.
- *
- * Since the original input is gone along with its callback, it
- * seems to make the most sense to do nothing.
- */
- if (jquery__WEBPACK_IMPORTED_MODULE_3___default()(el).data('callback') !== undefined) {
- this.setInputValue(el, value);
- this.getCallback(el)(rateLimited);
- this.render(el);
- }
- }
- }, {
- key: "initialize",
- value: function initialize(el) {
- jquery__WEBPACK_IMPORTED_MODULE_3___default()(el).data('value', JSON.parse(jquery__WEBPACK_IMPORTED_MODULE_3___default()(el).next().text()));
- jquery__WEBPACK_IMPORTED_MODULE_3___default()(el).data('configuration', JSON.parse(jquery__WEBPACK_IMPORTED_MODULE_3___default()(el).next().next().text()));
- }
- }, {
- key: "subscribe",
- value: function subscribe(el, callback) {
- jquery__WEBPACK_IMPORTED_MODULE_3___default()(el).data('callback', callback);
- this.render(el);
- }
- }, {
- key: "unsubscribe",
- value: function unsubscribe(el) {
- react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(null, el);
- }
- }, {
- key: "receiveMessage",
- value: function receiveMessage(el, data) {
- options.receiveMessage.call(this, el, data);
- }
- }, {
- key: "getType",
- value: function getType(el) {
- if (typeof options.type === 'function') {
- return options.type.call(this, el);
- } else if (options.type === false || typeof options.type === 'string') {
- return options.type;
- } else {
- throw new Error('options.type must be false, a string, or a function');
- }
- }
- }, {
- key: "getRatePolicy",
- value: function getRatePolicy() {
- return options.ratePolicy;
- }
- /*
- * Methods not present in Shiny.InputBinding but accessible to users
- * through `this` in receiveMessage
- */
-
- }, {
- key: "getInputValue",
- value: function getInputValue(el) {
- return jquery__WEBPACK_IMPORTED_MODULE_3___default()(el).data('value');
- }
- }, {
- key: "setInputValue",
- value: function setInputValue(el, value) {
- jquery__WEBPACK_IMPORTED_MODULE_3___default()(el).data('value', value);
- }
- }, {
- key: "getInputConfiguration",
- value: function getInputConfiguration(el) {
- return jquery__WEBPACK_IMPORTED_MODULE_3___default()(el).data('configuration');
- }
- }, {
- key: "setInputConfiguration",
- value: function setInputConfiguration(el, configuration) {
- jquery__WEBPACK_IMPORTED_MODULE_3___default()(el).data('configuration', configuration);
- }
- }, {
- key: "getCallback",
- value: function getCallback(el) {
- return jquery__WEBPACK_IMPORTED_MODULE_3___default()(el).data('callback');
- }
- }, {
- key: "render",
- value: function render(el) {
- var element = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(component, {
- configuration: this.getInputConfiguration(el),
- value: this.getValue(el),
- setValue: this.setValue.bind(this, el),
- el: el
- });
- react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.render(element, el);
- }
- }]);
-
- return _class;
- }(shiny__WEBPACK_IMPORTED_MODULE_2___default.a.InputBinding))(), name);
-}
-
-/***/ }),
-
-/***/ "./srcjs/react-tools.js":
-/*!******************************!*\
- !*** ./srcjs/react-tools.js ***!
- \******************************/
-/*! no exports provided */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _widget__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./widget */ "./srcjs/widget.js");
-/* harmony import */ var _input__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./input */ "./srcjs/input.js");
-
-
-window.reactR = {
- reactShinyInput: _input__WEBPACK_IMPORTED_MODULE_1__["reactShinyInput"],
- reactWidget: _widget__WEBPACK_IMPORTED_MODULE_0__["reactWidget"],
- hydrate: _widget__WEBPACK_IMPORTED_MODULE_0__["hydrate"]
-};
-
-/***/ }),
-
-/***/ "./srcjs/widget.js":
-/*!*************************!*\
- !*** ./srcjs/widget.js ***!
- \*************************/
-/*! exports provided: hydrate, defaultOptions, mergeOptions, formatDimension, isTag, reactWidget */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hydrate", function() { return hydrate; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "defaultOptions", function() { return defaultOptions; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mergeOptions", function() { return mergeOptions; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "formatDimension", function() { return formatDimension; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isTag", function() { return isTag; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "reactWidget", function() { return reactWidget; });
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-/**
- * Recursively transforms tag, a JSON representation of an instance of a
- * React component and its children, into a React element suitable for
- * passing to ReactDOM.render.
- * @param {Object} components
- * @param {Object} tag
- */
-function hydrate(components, tag) {
- if (typeof tag === 'string') return tag;
-
- if (tag.name[0] === tag.name[0].toUpperCase() && !components.hasOwnProperty(tag.name)) {
- throw new Error("Unknown component: " + tag.name);
- }
-
- var elem = components.hasOwnProperty(tag.name) ? components[tag.name] : tag.name,
- args = [elem, tag.attribs];
-
- for (var i = 0; i < tag.children.length; i++) {
- args.push(hydrate(components, tag.children[i]));
- }
-
- return React.createElement.apply(React, args);
-}
-var defaultOptions = {
- // The name of the property on the root tag to use for the width, if
- // it's updated.
- widthProperty: "width",
- // The name of the property on the root tag to use for the height, if
- // it's updated.
- heightProperty: "height",
- // Whether or not to append the string 'px' to the width and height
- // properties when they change.
- appendPx: false,
- // Whether or not to dynamically update the width and height properties
- // of the last known tag when the computed width and height change in
- // the browser.
- renderOnResize: false
-};
-function mergeOptions(options) {
- var merged = {};
-
- for (var k in defaultOptions) {
- merged[k] = defaultOptions[k];
- }
-
- for (var k in options) {
- if (!defaultOptions.hasOwnProperty(k)) {
- throw new Error("Unrecognized option: " + k);
- }
-
- merged[k] = options[k];
- }
-
- return merged;
-}
-function formatDimension(dim, options) {
- if (options.appendPx) {
- return dim + 'px';
- } else {
- return dim;
- }
-}
-function isTag(value) {
- return _typeof(value) === 'object' && value.hasOwnProperty('name') && value.hasOwnProperty('attribs') && value.hasOwnProperty('children');
-}
-/**
- * Creates an HTMLWidget that is updated by rendering a React component.
- * React component constructors are made available by specifying them by
- * name in the components object.
- * @param {string} name
- * @param {string} type
- * @param {Object} components
- * @param {Object} options
- */
-
-function reactWidget(name, type, components, options) {
- var actualOptions = mergeOptions(options);
- window.HTMLWidgets.widget({
- name: name,
- type: type,
- factory: function factory(el, width, height) {
- var lastValue,
- instance = {},
- renderValue = function renderValue(value) {
- if (actualOptions.renderOnResize) {
- // value.tag might be a primitive string, in which
- // case there is no attribs property.
- if (_typeof(value.tag) === 'object') {
- value.tag.attribs[actualOptions["widthProperty"]] = formatDimension(width);
- value.tag.attribs[actualOptions["heightProperty"]] = formatDimension(height);
- }
-
- lastValue = value;
- } // with functional stateless components this will be null
- // see https://reactjs.org/docs/react-dom.html#render for more details
-
-
- this.instance.component = ReactDOM.render(hydrate(components, value.tag), el);
- };
-
- return {
- instance: instance,
- renderValue: renderValue,
- resize: function resize(newWidth, newHeight) {
- if (actualOptions.renderOnResize) {
- width = newWidth;
- height = newHeight;
- renderValue(lastValue);
- }
- }
- };
- }
- });
-}
-
-/***/ }),
-
-/***/ "jquery":
-/*!********************************!*\
- !*** external "window.jQuery" ***!
- \********************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-module.exports = window.jQuery;
-
-/***/ }),
-
-/***/ "react":
-/*!*******************************!*\
- !*** external "window.React" ***!
- \*******************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-module.exports = window.React;
-
-/***/ }),
-
-/***/ "react-dom":
-/*!**********************************!*\
- !*** external "window.ReactDOM" ***!
- \**********************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-module.exports = window.ReactDOM;
-
-/***/ }),
-
-/***/ "shiny":
-/*!*******************************!*\
- !*** external "window.Shiny" ***!
- \*******************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-module.exports = window.Shiny;
-
-/***/ })
-
-/******/ });
-//# sourceMappingURL=react-tools.js.map
\ No newline at end of file
diff --git a/articles/conditional-styling_files/reactwidget-1.0.0/react-tools.js.map b/articles/conditional-styling_files/reactwidget-1.0.0/react-tools.js.map
deleted file mode 100644
index 088dfa0e..00000000
--- a/articles/conditional-styling_files/reactwidget-1.0.0/react-tools.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./srcjs/input.js","webpack:///./srcjs/react-tools.js","webpack:///./srcjs/widget.js","webpack:///external \"window.jQuery\"","webpack:///external \"window.React\"","webpack:///external \"window.ReactDOM\"","webpack:///external \"window.Shiny\""],"names":["defaultReceiveMessage","el","configuration","value","dirty","undefined","setInputConfiguration","setInputValue","getCallback","render","defaultOptions","receiveMessage","type","ratePolicy","reactShinyInput","selector","name","component","options","Object","assign","Shiny","inputBindings","register","scope","$","find","getInputValue","rateLimited","data","JSON","parse","next","text","callback","ReactDOM","call","Error","element","React","createElement","getInputConfiguration","getValue","setValue","bind","InputBinding","window","reactR","reactWidget","hydrate","components","tag","toUpperCase","hasOwnProperty","elem","args","attribs","i","children","length","push","apply","widthProperty","heightProperty","appendPx","renderOnResize","mergeOptions","merged","k","formatDimension","dim","isTag","actualOptions","HTMLWidgets","widget","factory","width","height","lastValue","instance","renderValue","resize","newWidth","newHeight"],"mappings":"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","file":"react-tools.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./srcjs/react-tools.js\");\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport Shiny from 'shiny';\r\nimport $ from 'jquery';\r\n\r\n/*\r\n * This default receiveMessage implementation expects data to contain whole\r\n * configuration and value properties. If either is present, it will be set and\r\n * the component will be re-rendered. Because receiveMessage is typically used\r\n * by input authors to perform incremental updates, this default implementation\r\n * can be overriden by the user with the receiveMessage arguments to\r\n * reactShinyInput.\r\n */\r\nfunction defaultReceiveMessage(el, { configuration, value }) {\r\n let dirty = false;\r\n if (configuration !== undefined) {\r\n this.setInputConfiguration(el, configuration);\r\n dirty = true;\r\n }\r\n if (value !== undefined) {\r\n this.setInputValue(el, value);\r\n dirty = true;\r\n }\r\n if (dirty) {\r\n this.getCallback(el)();\r\n this.render(el);\r\n }\r\n}\r\n\r\nconst defaultOptions = {\r\n receiveMessage: defaultReceiveMessage,\r\n type: false,\r\n ratePolicy: null\r\n};\r\n\r\n/**\r\n * Installs a new Shiny input binding based on a React component.\r\n *\r\n * @param {string} selector - jQuery selector that should identify the set of\r\n * container elements within the scope argument of Shiny.InputBinding.find.\r\n * @param {string} name - A name such as 'acme.FooInput' that should uniquely\r\n * identify the component.\r\n * @param {Object} component - React Component, either class or function.\r\n * @param {Object} options - Additional configuration options. Supported\r\n * options are:\r\n * - receiveMessage: Implementation of Shiny.InputBinding to use in place of\r\n * the default. Typically overridden as an optimization to perform\r\n * incremental value updates.\r\n * - type: `false`, a string, or a function.\r\n * - `false` (the default): denotes that the value produced by this input\r\n * should not be intercepted by any handlers registered in R on the\r\n * server using shiny::registerInputHandler().\r\n * - string: denotes the input's *type* and should correspond to the\r\n * type parameter of shiny::registerInputHandler().\r\n * - function: A function called with `this` bound to the InputBinding\r\n * instance and passed a single argument, the input's containing DOM\r\n * element. The function should return either `false` or a string\r\n * corresponding to the type parameter of shiny::registerInputHandler().\r\n * - ratePolicy: A rate policy object as defined in the documentation for\r\n * getRatePolicy(): https://shiny.rstudio.com/articles/building-inputs.html\r\n * A rate policy object has two members:\r\n * - `policy`: Valid values are the strings \"direct\", \"debounce\", and\r\n * \"throttle\". \"direct\" means that all events are sent immediately.\r\n * - `delay`: Number indicating the number of milliseconds that should be\r\n * used when debouncing or throttling. Has no effect if the policy is\r\n * direct.\r\n * The specified rate policy is only applied when `true` is passed as the\r\n * second argument to the `setValue` function passed as a prop to the\r\n * input component.\r\n *\r\n */\r\nexport function reactShinyInput(selector,\r\n name,\r\n component,\r\n options) {\r\n options = Object.assign({}, defaultOptions, options);\r\n Shiny.inputBindings.register(new class extends Shiny.InputBinding {\r\n\r\n /*\r\n * Methods override those in Shiny.InputBinding\r\n */\r\n\r\n find(scope) {\r\n return $(scope).find(selector);\r\n }\r\n getValue(el) {\r\n return this.getInputValue(el);\r\n }\r\n setValue(el, value, rateLimited = false) {\r\n /*\r\n * We have to check whether $(el).data('callback') is undefined here\r\n * in case shiny::renderUI() is involved. If an input is contained in a\r\n * shiny::uiOutput(), the following strange thing happens occasionally:\r\n *\r\n * 1. setValue() is bound to an el in this.render(), below\r\n * 2. An event that will call setValue() is enqueued\r\n * 3. While the event is still enqueued, el is unbound and removed\r\n * from the DOM by the JS code associated with shiny::uiOutput()\r\n * - That code uses jQuery .html() in output_binding_html.js\r\n * - .html() removes el from the DOM and clears ist data and events\r\n * 4. By the time the setValue() bound to the original el is invoked,\r\n * el has been unbound and its data cleared.\r\n *\r\n * Since the original input is gone along with its callback, it\r\n * seems to make the most sense to do nothing.\r\n */\r\n if ($(el).data('callback') !== undefined) {\r\n this.setInputValue(el, value);\r\n this.getCallback(el)(rateLimited);\r\n this.render(el);\r\n }\r\n }\r\n initialize(el) {\r\n $(el).data('value', JSON.parse($(el).next().text()));\r\n $(el).data('configuration', JSON.parse($(el).next().next().text()));\r\n }\r\n subscribe(el, callback) {\r\n $(el).data('callback', callback);\r\n this.render(el);\r\n }\r\n unsubscribe(el) {\r\n ReactDOM.render(null, el);\r\n }\r\n receiveMessage(el, data) {\r\n options.receiveMessage.call(this, el, data);\r\n }\r\n getType(el) {\r\n if (typeof options.type === 'function') {\r\n return options.type.call(this, el);\r\n } else if (options.type === false || typeof options.type === 'string') {\r\n return options.type;\r\n } else {\r\n throw new Error('options.type must be false, a string, or a function');\r\n }\r\n }\r\n getRatePolicy() {\r\n return options.ratePolicy;\r\n }\r\n\r\n /*\r\n * Methods not present in Shiny.InputBinding but accessible to users\r\n * through `this` in receiveMessage\r\n */\r\n\r\n getInputValue(el) {\r\n return $(el).data('value');\r\n }\r\n setInputValue(el, value) {\r\n $(el).data('value', value);\r\n }\r\n getInputConfiguration(el) {\r\n return $(el).data('configuration');\r\n }\r\n setInputConfiguration(el, configuration) {\r\n $(el).data('configuration', configuration);\r\n }\r\n getCallback(el) {\r\n return $(el).data('callback');\r\n }\r\n render(el) {\r\n const element = React.createElement(component, {\r\n configuration: this.getInputConfiguration(el),\r\n value: this.getValue(el),\r\n setValue: this.setValue.bind(this, el),\r\n el: el\r\n });\r\n ReactDOM.render(element, el);\r\n }\r\n }, name);\r\n}\r\n\r\n","import { reactWidget, hydrate } from './widget';\r\nimport { reactShinyInput } from './input';\r\n\r\nwindow.reactR = {\r\n reactShinyInput: reactShinyInput,\r\n reactWidget: reactWidget,\r\n hydrate: hydrate\r\n};\r\n","/**\r\n * Recursively transforms tag, a JSON representation of an instance of a\r\n * React component and its children, into a React element suitable for\r\n * passing to ReactDOM.render.\r\n * @param {Object} components\r\n * @param {Object} tag\r\n */\r\nexport function hydrate(components, tag) {\r\n if (typeof tag === 'string') return tag;\r\n if (tag.name[0] === tag.name[0].toUpperCase()\r\n && !components.hasOwnProperty(tag.name)) {\r\n throw new Error(\"Unknown component: \" + tag.name);\r\n }\r\n var elem = components.hasOwnProperty(tag.name) ? components[tag.name] : tag.name,\r\n args = [elem, tag.attribs];\r\n for (var i = 0; i < tag.children.length; i++) {\r\n args.push(hydrate(components, tag.children[i]));\r\n }\r\n return React.createElement.apply(React, args);\r\n}\r\n\r\nexport const defaultOptions = {\r\n // The name of the property on the root tag to use for the width, if\r\n // it's updated.\r\n widthProperty: \"width\",\r\n // The name of the property on the root tag to use for the height, if\r\n // it's updated.\r\n heightProperty: \"height\",\r\n // Whether or not to append the string 'px' to the width and height\r\n // properties when they change.\r\n appendPx: false,\r\n // Whether or not to dynamically update the width and height properties\r\n // of the last known tag when the computed width and height change in\r\n // the browser.\r\n renderOnResize: false\r\n};\r\n\r\nexport function mergeOptions(options) {\r\n var merged = {};\r\n for (var k in defaultOptions) {\r\n merged[k] = defaultOptions[k];\r\n }\r\n for (var k in options) {\r\n if (!defaultOptions.hasOwnProperty(k)) {\r\n throw new Error(\"Unrecognized option: \" + k);\r\n }\r\n merged[k] = options[k];\r\n }\r\n return merged;\r\n}\r\n\r\nexport function formatDimension(dim, options) {\r\n if (options.appendPx) {\r\n return dim + 'px';\r\n } else {\r\n return dim;\r\n }\r\n}\r\n\r\nexport function isTag(value) {\r\n return (typeof value === 'object')\r\n && value.hasOwnProperty('name')\r\n && value.hasOwnProperty('attribs')\r\n && value.hasOwnProperty('children');\r\n}\r\n\r\n/**\r\n * Creates an HTMLWidget that is updated by rendering a React component.\r\n * React component constructors are made available by specifying them by\r\n * name in the components object.\r\n * @param {string} name\r\n * @param {string} type\r\n * @param {Object} components\r\n * @param {Object} options\r\n */\r\nexport function reactWidget(name, type, components, options) {\r\n var actualOptions = mergeOptions(options);\r\n window.HTMLWidgets.widget({\r\n name: name,\r\n type: type,\r\n factory: function (el, width, height) {\r\n var lastValue,\r\n instance = {},\r\n renderValue = (function (value) {\r\n if (actualOptions.renderOnResize) {\r\n // value.tag might be a primitive string, in which\r\n // case there is no attribs property.\r\n if (typeof value.tag === 'object') {\r\n value.tag.attribs[actualOptions[\"widthProperty\"]] = formatDimension(width);\r\n value.tag.attribs[actualOptions[\"heightProperty\"]] = formatDimension(height);\r\n }\r\n lastValue = value;\r\n }\r\n // with functional stateless components this will be null\r\n // see https://reactjs.org/docs/react-dom.html#render for more details\r\n this.instance.component = ReactDOM.render(hydrate(components, value.tag), el);\r\n });\r\n return {\r\n instance: instance,\r\n renderValue: renderValue,\r\n resize: function (newWidth, newHeight) {\r\n if (actualOptions.renderOnResize) {\r\n width = newWidth;\r\n height = newHeight;\r\n renderValue(lastValue);\r\n }\r\n }\r\n };\r\n }\r\n })\r\n}\r\n\r\n","module.exports = window.jQuery;","module.exports = window.React;","module.exports = window.ReactDOM;","module.exports = window.Shiny;"],"sourceRoot":""}
\ No newline at end of file
diff --git a/articles/conditional-styling_files/reactwidget-2.0.0/react-tools.umd.cjs b/articles/conditional-styling_files/reactwidget-2.0.0/react-tools.umd.cjs
new file mode 100644
index 00000000..159c7ab3
--- /dev/null
+++ b/articles/conditional-styling_files/reactwidget-2.0.0/react-tools.umd.cjs
@@ -0,0 +1 @@
+(function(s,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(s=typeof globalThis<"u"?globalThis:s||self,u(s.reactR={}))})(this,function(s){"use strict";function u(n,t){if(typeof t=="string")return t;if(t.name[0]===t.name[0].toUpperCase()&&!n.hasOwnProperty(t.name))throw new Error("Unknown component: "+t.name);for(let i in t.attribs)g(t.attribs[i])&&(t.attribs[i]=u(n,t.attribs[i]));for(var a=n.hasOwnProperty(t.name)?n[t.name]:t.name,r=[a,t.attribs],e=0;e
-
+
-
+
-
+
JavaScript style function
@@ -1333,8 +1334,8 @@
-
-
+
+
@@ -288,7 +289,7 @@
@@ -110,8 +111,8 @@
@@ -209,79 +210,79 @@
Top CRAN Packages of 2019
- - + +@@ -209,79 +210,79 @@
tags$link(href = "https://fonts.googleapis.com/css?family=Nunito:400,600,700&display=fallback", rel = "stylesheet")
-.cran-packages {
- font-family: Nunito, "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.title {
- font-size: 1.5rem;
-}
-
-.packages-table {
- margin-top: 1rem;
- font-size: 0.9375rem;
- border: 1px solid hsl(213, 33%, 93%);
- border-radius: 4px;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
-}
-
-.header {
- background-color: hsl(213, 45%, 97%);
- border-bottom-color: hsl(213, 33%, 93%);
- border-bottom-width: 1px;
- color: hsl(213, 13%, 33%);
-}
-
-.header[aria-sort]:hover,
-.header[aria-sort]:focus {
- color: hsl(213, 55%, 50%);
-}
-
-.units {
- margin-left: 0.15em;
- color: rgba(0, 0, 0, 0.6);
-}
-
-.package-title {
- font-size: 0.875rem;
-}
-
-.package-detail {
- padding: 24px;
- box-shadow: inset 0 1px 3px #dbdbdb;
- background: hsl(213, 20%, 99%);
-}
-
-.detail-label {
- margin: 1.25rem 0 0.25rem;
- font-size: 0.875rem;
- color: rgba(0, 0, 0, 0.6);
-}
-
-.detail-header {
- margin-bottom: 1rem;
- font-size: 1.25rem;
- font-weight: 600;
-}
-
-.detail-title {
- margin-left: 1rem;
- font-size: 0.875rem;
- font-weight: 400;
- color: rgba(0, 0, 0, 0.6);
-}
-
-.detail-description {
- font-size: 0.875rem;
-}
-
-.archived-table {
- max-width: 15rem;
- border: 1px solid hsl(213, 33%, 93%);
- border-radius: 4px;
- box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.05);
- font-size: 0.875rem;
-}
+.cran-packages {
+ font-family: Nunito, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.title {
+ font-size: 1.5rem;
+}
+
+.packages-table {
+ margin-top: 1rem;
+ font-size: 0.9375rem;
+ border: 1px solid hsl(213, 33%, 93%);
+ border-radius: 4px;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+}
+
+.header {
+ background-color: hsl(213, 45%, 97%);
+ border-bottom-color: hsl(213, 33%, 93%);
+ border-bottom-width: 1px;
+ color: hsl(213, 13%, 33%);
+}
+
+.header[aria-sort]:hover,
+.header[aria-sort]:focus {
+ color: hsl(213, 55%, 50%);
+}
+
+.units {
+ margin-left: 0.15em;
+ color: rgba(0, 0, 0, 0.6);
+}
+
+.package-title {
+ font-size: 0.875rem;
+}
+
+.package-detail {
+ padding: 24px;
+ box-shadow: inset 0 1px 3px #dbdbdb;
+ background: hsl(213, 20%, 99%);
+}
+
+.detail-label {
+ margin: 1.25rem 0 0.25rem;
+ font-size: 0.875rem;
+ color: rgba(0, 0, 0, 0.6);
+}
+
+.detail-header {
+ margin-bottom: 1rem;
+ font-size: 1.25rem;
+ font-weight: 600;
+}
+
+.detail-title {
+ margin-left: 1rem;
+ font-size: 0.875rem;
+ font-weight: 400;
+ color: rgba(0, 0, 0, 0.6);
+}
+
+.detail-description {
+ font-size: 0.875rem;
+}
+
+.archived-table {
+ max-width: 15rem;
+ border: 1px solid hsl(213, 33%, 93%);
+ border-radius: 4px;
+ box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.05);
+ font-size: 0.875rem;
+}
tags$link(href = "https://fonts.googleapis.com/css?family=Nunito:400,600,700&display=fallback", rel = "stylesheet").cran-packages {
- font-family: Nunito, "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.title {
- font-size: 1.5rem;
-}
-
-.packages-table {
- margin-top: 1rem;
- font-size: 0.9375rem;
- border: 1px solid hsl(213, 33%, 93%);
- border-radius: 4px;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
-}
-
-.header {
- background-color: hsl(213, 45%, 97%);
- border-bottom-color: hsl(213, 33%, 93%);
- border-bottom-width: 1px;
- color: hsl(213, 13%, 33%);
-}
-
-.header[aria-sort]:hover,
-.header[aria-sort]:focus {
- color: hsl(213, 55%, 50%);
-}
-
-.units {
- margin-left: 0.15em;
- color: rgba(0, 0, 0, 0.6);
-}
-
-.package-title {
- font-size: 0.875rem;
-}
-
-.package-detail {
- padding: 24px;
- box-shadow: inset 0 1px 3px #dbdbdb;
- background: hsl(213, 20%, 99%);
-}
-
-.detail-label {
- margin: 1.25rem 0 0.25rem;
- font-size: 0.875rem;
- color: rgba(0, 0, 0, 0.6);
-}
-
-.detail-header {
- margin-bottom: 1rem;
- font-size: 1.25rem;
- font-weight: 600;
-}
-
-.detail-title {
- margin-left: 1rem;
- font-size: 0.875rem;
- font-weight: 400;
- color: rgba(0, 0, 0, 0.6);
-}
-
-.detail-description {
- font-size: 0.875rem;
-}
-
-.archived-table {
- max-width: 15rem;
- border: 1px solid hsl(213, 33%, 93%);
- border-radius: 4px;
- box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.05);
- font-size: 0.875rem;
-}.cran-packages {
+ font-family: Nunito, "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.title {
+ font-size: 1.5rem;
+}
+
+.packages-table {
+ margin-top: 1rem;
+ font-size: 0.9375rem;
+ border: 1px solid hsl(213, 33%, 93%);
+ border-radius: 4px;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+}
+
+.header {
+ background-color: hsl(213, 45%, 97%);
+ border-bottom-color: hsl(213, 33%, 93%);
+ border-bottom-width: 1px;
+ color: hsl(213, 13%, 33%);
+}
+
+.header[aria-sort]:hover,
+.header[aria-sort]:focus {
+ color: hsl(213, 55%, 50%);
+}
+
+.units {
+ margin-left: 0.15em;
+ color: rgba(0, 0, 0, 0.6);
+}
+
+.package-title {
+ font-size: 0.875rem;
+}
+
+.package-detail {
+ padding: 24px;
+ box-shadow: inset 0 1px 3px #dbdbdb;
+ background: hsl(213, 20%, 99%);
+}
+
+.detail-label {
+ margin: 1.25rem 0 0.25rem;
+ font-size: 0.875rem;
+ color: rgba(0, 0, 0, 0.6);
+}
+
+.detail-header {
+ margin-bottom: 1rem;
+ font-size: 1.25rem;
+ font-weight: 600;
+}
+
+.detail-title {
+ margin-left: 1rem;
+ font-size: 0.875rem;
+ font-weight: 400;
+ color: rgba(0, 0, 0, 0.6);
+}
+
+.detail-description {
+ font-size: 0.875rem;
+}
+
+.archived-table {
+ max-width: 15rem;
+ border: 1px solid hsl(213, 33%, 93%);
+ border-radius: 4px;
+ box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.05);
+ font-size: 0.875rem;
+}To find other Unicode arrows and symbols, see https://en.wikipedia.org/wiki/Arrow_(symbol)#Arrows_in_Unicode or https://www.fileformat.info/info/unicode/block/geometric_shapes/list.htm.
- - - - + +JavaScript style function
@@ -1333,8 +1334,8 @@ JavaScript style function }
}")
)
@@ -1424,64 +1425,64 @@ Highlight rows on hover
Highlight rows on hover
reactable(iris[1:5, ], highlight = TRUE)
-
-
+
+
reactable(iris[1:5, ], highlight = TRUE)Bordered
reactable(iris[1:5, ], bordered = TRUE)Borderless
reactable(iris[1:5, ], borderless = TRUE)Outlined
reactable(iris[1:5, ], outlined = TRUE)Striped
reactable(iris[1:5, ], striped = TRUE)Bordered + striped + highlighting
reactable(iris[1:5, ], bordered = TRUE, striped = TRUE, highlight = TRUE)Outlined + borderless
reactable(iris[1:5, ], outlined = TRUE, borderless = TRUE)Compact
reactable(iris[1:5, ], compact = TRUE)No text wrapping
@@ -1498,8 +1499,8 @@ No text wrapping bordered = TRUE,
columns = list(Petal.Length = colDef(name = "Petal Length (cm)", minWidth = 50))
)
Fixed height + sticky header/footer
@@ -1521,8 +1522,8 @@ Fixed height + sticky header/footer }
)
)
Column widths
@@ -1558,8 +1559,8 @@ Column widths),
bordered = TRUE
)
No full width
@@ -1575,8 +1576,8 @@ No full width= colDef(minWidth = 120)
)
-
-
+
+
You can also set a maximum or fixed width on the table:
@@ -1590,8 +1591,8 @@No full width= 650 )
-
-
+
+
@@ -1632,8 +1633,8 @@
-
-
+
+
Vertical alignment= colDef(vAlign = "center", headerVAlign = "bottom"), bordered = TRUE )
Custom CSS
@@ -1653,8 +1654,8 @@ Custom CSS),
rowClass = "my-row"
)
+
@@ -233,7 +234,7 @@ Basic Usage{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1,5.4,5.1,4.6,5.1,4.8,5,5,5.2,5.2,4.7,4.8,5.4,5.2,5.5,4.9,5,5.5,4.9,4.4,5.1,5,4.5,4.4,5,5.1,4.8,5.1,4.6,5.3,5,7,6.4,6.9,5.5,6.5,5.7,6.3,4.9,6.6,5.2,5,5.9,6,6.1,5.6,6.7,5.6,5.8,6.2,5.6,5.9,6.1,6.3,6.1,6.4,6.6,6.8,6.7,6,5.7,5.5,5.5,5.8,6,5.4,6,6.7,6.3,5.6,5.5,5.5,6.1,5.8,5,5.6,5.7,5.7,6.2,5.1,5.7,6.3,5.8,7.1,6.3,6.5,7.6,4.9,7.3,6.7,7.2,6.5,6.4,6.8,5.7,5.8,6.4,6.5,7.7,7.7,6,6.9,5.6,7.7,6.3,6.7,7.2,6.2,6.1,6.4,7.2,7.4,7.9,6.4,6.3,6.1,7.7,6.3,6.4,6,6.9,6.7,6.9,5.8,6.8,6.7,6.7,6.3,6.5,6.2,5.9],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8,3.4,3.7,3.6,3.3,3.4,3,3.4,3.5,3.4,3.2,3.1,3.4,4.1,4.2,3.1,3.2,3.5,3.6,3,3.4,3.5,2.3,3.2,3.5,3.8,3,3.8,3.2,3.7,3.3,3.2,3.2,3.1,2.3,2.8,2.8,3.3,2.4,2.9,2.7,2,3,2.2,2.9,2.9,3.1,3,2.7,2.2,2.5,3.2,2.8,2.5,2.8,2.9,3,2.8,3,2.9,2.6,2.4,2.4,2.7,2.7,3,3.4,3.1,2.3,3,2.5,2.6,3,2.6,2.3,2.7,3,2.9,2.9,2.5,2.8,3.3,2.7,3,2.9,3,3,2.5,2.9,2.5,3.6,3.2,2.7,3,2.5,2.8,3.2,3,3.8,2.6,2.2,3.2,2.8,2.8,2.7,3.3,3.2,2.8,3,2.8,3,2.8,3.8,2.8,2.8,2.6,3,3.4,3.1,3,3.1,3.1,3.1,2.7,3.2,3.3,3,2.5,3,3.4,3],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6,1.4,1.1,1.2,1.5,1.3,1.4,1.7,1.5,1.7,1.5,1,1.7,1.9,1.6,1.6,1.5,1.4,1.6,1.6,1.5,1.5,1.4,1.5,1.2,1.3,1.4,1.3,1.5,1.3,1.3,1.3,1.6,1.9,1.4,1.6,1.4,1.5,1.4,4.7,4.5,4.9,4,4.6,4.5,4.7,3.3,4.6,3.9,3.5,4.2,4,4.7,3.6,4.4,4.5,4.1,4.5,3.9,4.8,4,4.9,4.7,4.3,4.4,4.8,5,4.5,3.5,3.8,3.7,3.9,5.1,4.5,4.5,4.7,4.4,4.1,4,4.4,4.6,4,3.3,4.2,4.2,4.2,4.3,3,4.1,6,5.1,5.9,5.6,5.8,6.6,4.5,6.3,5.8,6.1,5.1,5.3,5.5,5,5.1,5.3,5.5,6.7,6.9,5,5.7,4.9,6.7,4.9,5.7,6,4.8,4.9,5.6,5.8,6.1,6.4,5.6,5.1,5.6,6.1,5.6,5.5,4.8,5.4,5.6,5.1,5.1,5.9,5.7,5.2,5,5.2,5.4,5.1],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2,0.1,0.1,0.2,0.4,0.4,0.3,0.3,0.3,0.2,0.4,0.2,0.5,0.2,0.2,0.4,0.2,0.2,0.2,0.2,0.4,0.1,0.2,0.2,0.2,0.2,0.1,0.2,0.2,0.3,0.3,0.2,0.6,0.4,0.3,0.2,0.2,0.2,0.2,1.4,1.5,1.5,1.3,1.5,1.3,1.6,1,1.3,1.4,1,1.5,1,1.4,1.3,1.4,1.5,1,1.5,1.1,1.8,1.3,1.5,1.2,1.3,1.4,1.4,1.7,1.5,1,1.1,1,1.2,1.6,1.5,1.6,1.5,1.3,1.3,1.3,1.2,1.4,1.2,1,1.3,1.2,1.3,1.3,1.1,1.3,2.5,1.9,2.1,1.8,2.2,2.1,1.7,1.8,1.8,2.5,2,1.9,2.1,2,2.4,2.3,1.8,2.2,2.3,1.5,2.3,2,2,1.8,2.1,1.8,1.8,1.8,2.1,1.6,1.9,2,2.2,1.5,1.4,2.3,2.4,1.8,1.8,2.1,2.4,2.3,1.9,2.3,2.5,2.3,1.9,2,2.3,1.8],"Species":["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"dataKey":"1980abf4c53c6ff35ad17d6d5d0650a0"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
Basic Usage{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1,5.4,5.1,4.6,5.1,4.8,5,5,5.2,5.2,4.7,4.8,5.4,5.2,5.5,4.9,5,5.5,4.9,4.4,5.1,5,4.5,4.4,5,5.1,4.8,5.1,4.6,5.3,5,7,6.4,6.9,5.5,6.5,5.7,6.3,4.9,6.6,5.2,5,5.9,6,6.1,5.6,6.7,5.6,5.8,6.2,5.6,5.9,6.1,6.3,6.1,6.4,6.6,6.8,6.7,6,5.7,5.5,5.5,5.8,6,5.4,6,6.7,6.3,5.6,5.5,5.5,6.1,5.8,5,5.6,5.7,5.7,6.2,5.1,5.7,6.3,5.8,7.1,6.3,6.5,7.6,4.9,7.3,6.7,7.2,6.5,6.4,6.8,5.7,5.8,6.4,6.5,7.7,7.7,6,6.9,5.6,7.7,6.3,6.7,7.2,6.2,6.1,6.4,7.2,7.4,7.9,6.4,6.3,6.1,7.7,6.3,6.4,6,6.9,6.7,6.9,5.8,6.8,6.7,6.7,6.3,6.5,6.2,5.9],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8,3.4,3.7,3.6,3.3,3.4,3,3.4,3.5,3.4,3.2,3.1,3.4,4.1,4.2,3.1,3.2,3.5,3.6,3,3.4,3.5,2.3,3.2,3.5,3.8,3,3.8,3.2,3.7,3.3,3.2,3.2,3.1,2.3,2.8,2.8,3.3,2.4,2.9,2.7,2,3,2.2,2.9,2.9,3.1,3,2.7,2.2,2.5,3.2,2.8,2.5,2.8,2.9,3,2.8,3,2.9,2.6,2.4,2.4,2.7,2.7,3,3.4,3.1,2.3,3,2.5,2.6,3,2.6,2.3,2.7,3,2.9,2.9,2.5,2.8,3.3,2.7,3,2.9,3,3,2.5,2.9,2.5,3.6,3.2,2.7,3,2.5,2.8,3.2,3,3.8,2.6,2.2,3.2,2.8,2.8,2.7,3.3,3.2,2.8,3,2.8,3,2.8,3.8,2.8,2.8,2.6,3,3.4,3.1,3,3.1,3.1,3.1,2.7,3.2,3.3,3,2.5,3,3.4,3],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6,1.4,1.1,1.2,1.5,1.3,1.4,1.7,1.5,1.7,1.5,1,1.7,1.9,1.6,1.6,1.5,1.4,1.6,1.6,1.5,1.5,1.4,1.5,1.2,1.3,1.4,1.3,1.5,1.3,1.3,1.3,1.6,1.9,1.4,1.6,1.4,1.5,1.4,4.7,4.5,4.9,4,4.6,4.5,4.7,3.3,4.6,3.9,3.5,4.2,4,4.7,3.6,4.4,4.5,4.1,4.5,3.9,4.8,4,4.9,4.7,4.3,4.4,4.8,5,4.5,3.5,3.8,3.7,3.9,5.1,4.5,4.5,4.7,4.4,4.1,4,4.4,4.6,4,3.3,4.2,4.2,4.2,4.3,3,4.1,6,5.1,5.9,5.6,5.8,6.6,4.5,6.3,5.8,6.1,5.1,5.3,5.5,5,5.1,5.3,5.5,6.7,6.9,5,5.7,4.9,6.7,4.9,5.7,6,4.8,4.9,5.6,5.8,6.1,6.4,5.6,5.1,5.6,6.1,5.6,5.5,4.8,5.4,5.6,5.1,5.1,5.9,5.7,5.2,5,5.2,5.4,5.1],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2,0.1,0.1,0.2,0.4,0.4,0.3,0.3,0.3,0.2,0.4,0.2,0.5,0.2,0.2,0.4,0.2,0.2,0.2,0.2,0.4,0.1,0.2,0.2,0.2,0.2,0.1,0.2,0.2,0.3,0.3,0.2,0.6,0.4,0.3,0.2,0.2,0.2,0.2,1.4,1.5,1.5,1.3,1.5,1.3,1.6,1,1.3,1.4,1,1.5,1,1.4,1.3,1.4,1.5,1,1.5,1.1,1.8,1.3,1.5,1.2,1.3,1.4,1.4,1.7,1.5,1,1.1,1,1.2,1.6,1.5,1.6,1.5,1.3,1.3,1.3,1.2,1.4,1.2,1,1.3,1.2,1.3,1.3,1.1,1.3,2.5,1.9,2.1,1.8,2.2,2.1,1.7,1.8,1.8,2.5,2,1.9,2.1,2,2.4,2.3,1.8,2.2,2.3,1.5,2.3,2,2,1.8,2.1,1.8,1.8,1.8,2.1,1.6,1.9,2,2.2,1.5,1.4,2.3,2.4,1.8,1.8,2.1,2.4,2.3,1.9,2.3,2.5,2.3,1.9,2,2.3,1.8],"Species":["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"dataKey":"1980abf4c53c6ff35ad17d6d5d0650a0"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Column definitions
Columns can be customized by providing a named list of column
@@ -248,7 +249,7 @@
Column definitions= colDef(align = "center")
)
)
-
+
-For convenience, you can also specify a default colDef()
+
For convenience, you can also specify a default colDef()
to use for all columns in defaultColDef:
reactable(
@@ -324,7 +325,7 @@ Column definitions= TRUE,
highlight = TRUE
)
-
+
@@ -411,7 +412,7 @@ Default sorted columnsdefaultSorted:
-
+
-You can also provide a named list to customize the default sort
+
You can also provide a named list to customize the default sort
orders. Use "asc" for ascending order, or
"desc" for descending order:
-
+
Default sort order
@@ -555,7 +556,7 @@ Default sort order),
defaultSorted = c("Species", "Petal.Length")
)
-
+
Sort missing values last
@@ -630,7 +631,7 @@ Sort missing values last defaultColDef = colDef(sortNALast = TRUE),
defaultSorted = "x"
)
-
+
No sorting
@@ -691,7 +692,7 @@ No sorting= colDef(sortable = TRUE)
)
)
-
Hide sort icons
@@ -752,7 +753,7 @@ Hide sort icons.
reactable(iris[1:5, ], showSortIcon = FALSE)
-
@@ -811,7 +812,7 @@ Filteringdata <- MASS::Cars93[1:20, c("Manufacturer", "Model", "Type", "AirBags", "Price")]
reactable(data, filterable = TRUE, minRows = 10)
-
+
@@ -924,7 +925,7 @@ Filtering{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric"}],"filterable":true,"minRows":10,"dataKey":"55e896d6e49b979ddd4597432695f612"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}To make specific columns filterable (or not), set
+
To make specific columns filterable (or not), set
filterable to TRUE or FALSE in
colDef():
@@ -936,7 +937,7 @@ Filtering),
defaultPageSize = 5
)
-
+
@@ -1014,7 +1015,7 @@ Filtering{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric","filterable":false}],"filterable":true,"defaultPageSize":5,"dataKey":"29704e01ca83ef47032806b9ddd3271b"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Custom filtering
Column filtering can be customized using the
@@ -1043,7 +1044,7 @@
Custom filtering ),
defaultPageSize = 5
)
-
+
@@ -1123,7 +1124,7 @@ Searchingdata <- MASS::Cars93[1:20, c("Manufacturer", "Model", "Type", "AirBags", "Price")]
reactable(data, searchable = TRUE, minRows = 10)
-
+
@@ -1227,7 +1228,7 @@ Searching{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric"}],"searchable":true,"minRows":10,"dataKey":"55e896d6e49b979ddd4597432695f612"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Custom searching
The table search method can be customized using the
@@ -1243,7 +1244,7 @@
Pagination
reactable(iris[1:6, ], defaultPageSize = 4)
-
+
@@ -1302,12 +1303,12 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"defaultPageSize":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}You can also set the minimum rows per page using
+
You can also set the minimum rows per page using
minRows. This may be useful when rows don’t completely fill
the page, or if the table has filtering:
reactable(iris[1:6, ], defaultPageSize = 4, minRows = 4, searchable = TRUE)
-
+
@@ -1366,7 +1367,7 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"searchable":true,"defaultPageSize":4,"minRows":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Page size options
You can show a dropdown of page sizes for users to choose from using
@@ -1379,7 +1380,7 @@
Page size options= c(4, 8, 12),
defaultPageSize = 4
)
-
+
Alternative pagination types
@@ -1462,7 +1463,7 @@ Page jump
reactable(iris[1:50, ], paginationType = "jump", defaultPageSize = 4)
-
+
Simple
reactable(iris[1:50, ], paginationType = "simple", defaultPageSize = 4)
-
+
@@ -1600,7 +1601,7 @@ Hide page infoFALSE:
reactable(iris[1:12, ], showPageInfo = FALSE, defaultPageSize = 4)
-
+
-
+
reactable(iris[1:12, ], showPageInfo = FALSE, showPageSizeOptions = TRUE, defaultPageSize = 4)
-
+
Always show pagination
@@ -1735,7 +1736,7 @@ Always show pagination
reactable(iris[1:5, ], showPagination = TRUE)
-
+
No pagination
@@ -1810,7 +1811,7 @@ No pagination
reactable(iris[1:20, ], pagination = FALSE, highlight = TRUE, height = 250)
-
+
-
+
Tip: Disabling pagination is not recommended for
large tables with many interactive elements (such as links, expand
buttons, or selection checkboxes), as that can make it difficult for
@@ -1990,7 +1991,7 @@
Grouping and Aggregationdata <- MASS::Cars93[10:22, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Manufacturer")
-
+
-When rows are grouped, you can aggregate data in a column using an
+
When rows are grouped, you can aggregate data in a column using an
aggregate function:
data <- MASS::Cars93[14:38, c("Type", "Price", "MPG.city", "DriveTrain", "Man.trans.avail")]
@@ -2062,7 +2063,7 @@ Grouping and Aggregation Man.trans.avail = colDef(aggregate = "frequency")
)
)
-
+
-You can use one of the built-in aggregate functions:
+You can use one of the built-in aggregate functions:
colDef(aggregate = "sum") # Sum of numbers
colDef(aggregate = "mean") # Mean of numbers
@@ -2180,7 +2181,7 @@ Multiple groups ),
bordered = TRUE
)
-
+
Custom aggregate function
@@ -2242,21 +2243,21 @@ Custom aggregate functionWithin a custom aggregate function, you can access the values in the
column using the values argument, and the values in other
columns using the rows argument:
-columns = list(
- Price = colDef(
- aggregate = JS("function(values, rows) {
- values
- // [46.8, 27.6, 57]
-
- rows
- // [
- // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
- // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
- // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
- // ]
- }")
- )
-)
+columns = list(
+ Price = colDef(
+ aggregate = JS("function(values, rows) {
+ values
+ // [46.8, 27.6, 57]
+
+ rows
+ // [
+ // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
+ // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
+ // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
+ // ]
+ }")
+ )
+)
Here’s an example that calculates an aggregate average price by
dividing the the sum of two columns, Price and
Units:
@@ -2291,7 +2292,7 @@ Custom aggregate function )
)
)
-
+
Include sub rows in pagination
@@ -2361,7 +2362,7 @@ Include sub rows in paginationdata <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Type", paginateSubRows = TRUE)
-
+
@@ -2482,7 +2483,7 @@ Column Formatting= colDef(format = colFormat(percent = TRUE, digits = 1)),
date = colDef(format = colFormat(date = TRUE, locales = "en-GB"))
))
-
+
-
+
Date formatting
@@ -2553,7 +2554,7 @@ Date formatting time_24h = colDef(format = colFormat(time = TRUE, hour12 = FALSE)),
datetime_pt_BR = colDef(format = colFormat(datetime = TRUE, locales = "pt-BR"))
))
-
+
Currency formatting
@@ -2632,7 +2633,7 @@ Currency formatting= colFormat(currency = "MAD", separators = TRUE, locales = "ar-MA")
)
))
-
+
Formatting aggregated cells
@@ -2729,7 +2730,7 @@ Formatting aggregated cells)
)
)
-
+
Displaying missing values
@@ -2791,7 +2792,7 @@ Displaying missing values y = colDef(na = "NA", format = colFormat(percent = TRUE))
)
)
-
+
Custom data formatting
@@ -2884,7 +2885,7 @@ R render functionpaste0("$", format(value * 1000, big.mark = ","))
})
))
-
+
JavaScript render function
@@ -2974,7 +2975,7 @@ JavaScript render function }
"))
))
-
+
Embedding HTML widgets
@@ -3060,7 +3061,7 @@ Embedding HTML widgets sparkline(data$weight[[index]])
})
))
-
+
Column definitions
Columns can be customized by providing a named list of column @@ -248,7 +249,7 @@
Column definitions= colDef(align = "center") ) )
+
-
-
For convenience, you can also specify a default colDef()
+
For convenience, you can also specify a default colDef()
to use for all columns in defaultColDef:
reactable(
@@ -324,7 +325,7 @@ Column definitions= TRUE,
highlight = TRUE
)
+
@@ -411,7 +412,7 @@ Default sorted columnsdefaultSorted:
-
Default sorted columnsdefaultSorted:
-
+
-You can also provide a named list to customize the default sort
+
You can also provide a named list to customize the default sort
orders. Use "asc" for ascending order, or
"desc" for descending order:
-
+
Default sort order
@@ -555,7 +556,7 @@ Default sort order),
defaultSorted = c("Species", "Petal.Length")
)
-
+
Sort missing values last
@@ -630,7 +631,7 @@ Sort missing values last defaultColDef = colDef(sortNALast = TRUE),
defaultSorted = "x"
)
-
+
No sorting
@@ -691,7 +692,7 @@ No sorting= colDef(sortable = TRUE)
)
)
-
Hide sort icons
@@ -752,7 +753,7 @@ Hide sort icons.
reactable(iris[1:5, ], showSortIcon = FALSE)
-
@@ -811,7 +812,7 @@ Filteringdata <- MASS::Cars93[1:20, c("Manufacturer", "Model", "Type", "AirBags", "Price")]
reactable(data, filterable = TRUE, minRows = 10)
-
+
@@ -924,7 +925,7 @@ Filtering{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric"}],"filterable":true,"minRows":10,"dataKey":"55e896d6e49b979ddd4597432695f612"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}To make specific columns filterable (or not), set
+
To make specific columns filterable (or not), set
filterable to TRUE or FALSE in
colDef():
@@ -936,7 +937,7 @@ Filtering),
defaultPageSize = 5
)
-
+
@@ -1014,7 +1015,7 @@ Filtering{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric","filterable":false}],"filterable":true,"defaultPageSize":5,"dataKey":"29704e01ca83ef47032806b9ddd3271b"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Custom filtering
Column filtering can be customized using the
@@ -1043,7 +1044,7 @@
Custom filtering ),
defaultPageSize = 5
)
-
+
@@ -1123,7 +1124,7 @@ Searchingdata <- MASS::Cars93[1:20, c("Manufacturer", "Model", "Type", "AirBags", "Price")]
reactable(data, searchable = TRUE, minRows = 10)
-
+
@@ -1227,7 +1228,7 @@ Searching{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric"}],"searchable":true,"minRows":10,"dataKey":"55e896d6e49b979ddd4597432695f612"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Custom searching
The table search method can be customized using the
@@ -1243,7 +1244,7 @@
Pagination
reactable(iris[1:6, ], defaultPageSize = 4)
-
+
@@ -1302,12 +1303,12 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"defaultPageSize":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}You can also set the minimum rows per page using
+
You can also set the minimum rows per page using
minRows. This may be useful when rows don’t completely fill
the page, or if the table has filtering:
reactable(iris[1:6, ], defaultPageSize = 4, minRows = 4, searchable = TRUE)
-
+
@@ -1366,7 +1367,7 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"searchable":true,"defaultPageSize":4,"minRows":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Page size options
You can show a dropdown of page sizes for users to choose from using
@@ -1379,7 +1380,7 @@
Page size options= c(4, 8, 12),
defaultPageSize = 4
)
-
+
Alternative pagination types
@@ -1462,7 +1463,7 @@ Page jump
reactable(iris[1:50, ], paginationType = "jump", defaultPageSize = 4)
-
+
Simple
reactable(iris[1:50, ], paginationType = "simple", defaultPageSize = 4)
-
+
@@ -1600,7 +1601,7 @@ Hide page infoFALSE:
reactable(iris[1:12, ], showPageInfo = FALSE, defaultPageSize = 4)
-
+
-
+
reactable(iris[1:12, ], showPageInfo = FALSE, showPageSizeOptions = TRUE, defaultPageSize = 4)
-
+
Always show pagination
@@ -1735,7 +1736,7 @@ Always show pagination
reactable(iris[1:5, ], showPagination = TRUE)
-
+
No pagination
@@ -1810,7 +1811,7 @@ No pagination
reactable(iris[1:20, ], pagination = FALSE, highlight = TRUE, height = 250)
-
+
-
+
Tip: Disabling pagination is not recommended for
large tables with many interactive elements (such as links, expand
buttons, or selection checkboxes), as that can make it difficult for
@@ -1990,7 +1991,7 @@
Grouping and Aggregationdata <- MASS::Cars93[10:22, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Manufacturer")
-
+
-When rows are grouped, you can aggregate data in a column using an
+
When rows are grouped, you can aggregate data in a column using an
aggregate function:
data <- MASS::Cars93[14:38, c("Type", "Price", "MPG.city", "DriveTrain", "Man.trans.avail")]
@@ -2062,7 +2063,7 @@ Grouping and Aggregation Man.trans.avail = colDef(aggregate = "frequency")
)
)
-
+
-You can use one of the built-in aggregate functions:
+You can use one of the built-in aggregate functions:
colDef(aggregate = "sum") # Sum of numbers
colDef(aggregate = "mean") # Mean of numbers
@@ -2180,7 +2181,7 @@ Multiple groups ),
bordered = TRUE
)
-
+
Custom aggregate function
@@ -2242,21 +2243,21 @@ Custom aggregate functionWithin a custom aggregate function, you can access the values in the
column using the values argument, and the values in other
columns using the rows argument:
-columns = list(
- Price = colDef(
- aggregate = JS("function(values, rows) {
- values
- // [46.8, 27.6, 57]
-
- rows
- // [
- // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
- // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
- // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
- // ]
- }")
- )
-)
+columns = list(
+ Price = colDef(
+ aggregate = JS("function(values, rows) {
+ values
+ // [46.8, 27.6, 57]
+
+ rows
+ // [
+ // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
+ // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
+ // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
+ // ]
+ }")
+ )
+)
Here’s an example that calculates an aggregate average price by
dividing the the sum of two columns, Price and
Units:
@@ -2291,7 +2292,7 @@ Custom aggregate function )
)
)
-
+
Include sub rows in pagination
@@ -2361,7 +2362,7 @@ Include sub rows in paginationdata <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Type", paginateSubRows = TRUE)
-
+
@@ -2482,7 +2483,7 @@ Column Formatting= colDef(format = colFormat(percent = TRUE, digits = 1)),
date = colDef(format = colFormat(date = TRUE, locales = "en-GB"))
))
-
+
-
+
Date formatting
@@ -2553,7 +2554,7 @@ Date formatting time_24h = colDef(format = colFormat(time = TRUE, hour12 = FALSE)),
datetime_pt_BR = colDef(format = colFormat(datetime = TRUE, locales = "pt-BR"))
))
-
+
Currency formatting
@@ -2632,7 +2633,7 @@ Currency formatting= colFormat(currency = "MAD", separators = TRUE, locales = "ar-MA")
)
))
-
+
Formatting aggregated cells
@@ -2729,7 +2730,7 @@ Formatting aggregated cells)
)
)
-
+
Displaying missing values
@@ -2791,7 +2792,7 @@ Displaying missing values y = colDef(na = "NA", format = colFormat(percent = TRUE))
)
)
-
+
Custom data formatting
@@ -2884,7 +2885,7 @@ R render functionpaste0("$", format(value * 1000, big.mark = ","))
})
))
-
+
JavaScript render function
@@ -2974,7 +2975,7 @@ JavaScript render function }
"))
))
-
+
Embedding HTML widgets
@@ -3060,7 +3061,7 @@ Embedding HTML widgets sparkline(data$weight[[index]])
})
))
-
+
+
-
You can also provide a named list to customize the default sort +
You can also provide a named list to customize the default sort
orders. Use "asc" for ascending order, or
"desc" for descending order:
+
Default sort order
@@ -555,7 +556,7 @@
-
Default sort order
@@ -555,7 +556,7 @@ Default sort order),
defaultSorted = c("Species", "Petal.Length")
)
+
Sort missing values last
@@ -630,7 +631,7 @@
-
Sort missing values last
@@ -630,7 +631,7 @@ Sort missing values last defaultColDef = colDef(sortNALast = TRUE),
defaultSorted = "x"
)
+
No sorting
@@ -691,7 +692,7 @@
-
Hide sort icons
@@ -752,7 +753,7 @@
No sorting
@@ -691,7 +692,7 @@ No sorting= colDef(sortable = TRUE)
)
)
Hide sort icons
@@ -752,7 +753,7 @@ Hide sort icons.
reactable(iris[1:5, ], showSortIcon = FALSE)
-
@@ -811,7 +812,7 @@ Filteringdata <- MASS::Cars93[1:20, c("Manufacturer", "Model", "Type", "AirBags", "Price")]
reactable(data, filterable = TRUE, minRows = 10)
-
+
@@ -924,7 +925,7 @@ Filtering{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric"}],"filterable":true,"minRows":10,"dataKey":"55e896d6e49b979ddd4597432695f612"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}To make specific columns filterable (or not), set
+
To make specific columns filterable (or not), set
filterable to TRUE or FALSE in
colDef():
@@ -936,7 +937,7 @@ Filtering),
defaultPageSize = 5
)
-
+
@@ -1014,7 +1015,7 @@ Filtering{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric","filterable":false}],"filterable":true,"defaultPageSize":5,"dataKey":"29704e01ca83ef47032806b9ddd3271b"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Custom filtering
Column filtering can be customized using the
@@ -1043,7 +1044,7 @@
Custom filtering ),
defaultPageSize = 5
)
-
+
@@ -1123,7 +1124,7 @@ Searchingdata <- MASS::Cars93[1:20, c("Manufacturer", "Model", "Type", "AirBags", "Price")]
reactable(data, searchable = TRUE, minRows = 10)
-
+
@@ -1227,7 +1228,7 @@ Searching{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric"}],"searchable":true,"minRows":10,"dataKey":"55e896d6e49b979ddd4597432695f612"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Custom searching
The table search method can be customized using the
@@ -1243,7 +1244,7 @@
Pagination
reactable(iris[1:6, ], defaultPageSize = 4)
-
+
@@ -1302,12 +1303,12 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"defaultPageSize":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}You can also set the minimum rows per page using
+
You can also set the minimum rows per page using
minRows. This may be useful when rows don’t completely fill
the page, or if the table has filtering:
reactable(iris[1:6, ], defaultPageSize = 4, minRows = 4, searchable = TRUE)
-
+
@@ -1366,7 +1367,7 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"searchable":true,"defaultPageSize":4,"minRows":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Page size options
You can show a dropdown of page sizes for users to choose from using
@@ -1379,7 +1380,7 @@
Page size options= c(4, 8, 12),
defaultPageSize = 4
)
-
+
Alternative pagination types
@@ -1462,7 +1463,7 @@ Page jump
reactable(iris[1:50, ], paginationType = "jump", defaultPageSize = 4)
-
+
Simple
reactable(iris[1:50, ], paginationType = "simple", defaultPageSize = 4)
-
+
@@ -1600,7 +1601,7 @@ Hide page infoFALSE:
reactable(iris[1:12, ], showPageInfo = FALSE, defaultPageSize = 4)
-
+
-
+
reactable(iris[1:12, ], showPageInfo = FALSE, showPageSizeOptions = TRUE, defaultPageSize = 4)
-
+
Always show pagination
@@ -1735,7 +1736,7 @@ Always show pagination
reactable(iris[1:5, ], showPagination = TRUE)
-
+
No pagination
@@ -1810,7 +1811,7 @@ No pagination
reactable(iris[1:20, ], pagination = FALSE, highlight = TRUE, height = 250)
-
+
-
+
Tip: Disabling pagination is not recommended for
large tables with many interactive elements (such as links, expand
buttons, or selection checkboxes), as that can make it difficult for
@@ -1990,7 +1991,7 @@
Grouping and Aggregationdata <- MASS::Cars93[10:22, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Manufacturer")
-
+
-When rows are grouped, you can aggregate data in a column using an
+
When rows are grouped, you can aggregate data in a column using an
aggregate function:
data <- MASS::Cars93[14:38, c("Type", "Price", "MPG.city", "DriveTrain", "Man.trans.avail")]
@@ -2062,7 +2063,7 @@ Grouping and Aggregation Man.trans.avail = colDef(aggregate = "frequency")
)
)
-
+
-You can use one of the built-in aggregate functions:
+You can use one of the built-in aggregate functions:
colDef(aggregate = "sum") # Sum of numbers
colDef(aggregate = "mean") # Mean of numbers
@@ -2180,7 +2181,7 @@ Multiple groups ),
bordered = TRUE
)
-
+
Custom aggregate function
@@ -2242,21 +2243,21 @@ Custom aggregate functionWithin a custom aggregate function, you can access the values in the
column using the values argument, and the values in other
columns using the rows argument:
-columns = list(
- Price = colDef(
- aggregate = JS("function(values, rows) {
- values
- // [46.8, 27.6, 57]
-
- rows
- // [
- // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
- // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
- // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
- // ]
- }")
- )
-)
+columns = list(
+ Price = colDef(
+ aggregate = JS("function(values, rows) {
+ values
+ // [46.8, 27.6, 57]
+
+ rows
+ // [
+ // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
+ // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
+ // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
+ // ]
+ }")
+ )
+)
Here’s an example that calculates an aggregate average price by
dividing the the sum of two columns, Price and
Units:
@@ -2291,7 +2292,7 @@ Custom aggregate function )
)
)
-
+
Include sub rows in pagination
@@ -2361,7 +2362,7 @@ Include sub rows in paginationdata <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Type", paginateSubRows = TRUE)
-
+
@@ -2482,7 +2483,7 @@ Column Formatting= colDef(format = colFormat(percent = TRUE, digits = 1)),
date = colDef(format = colFormat(date = TRUE, locales = "en-GB"))
))
-
+
-
+
Date formatting
@@ -2553,7 +2554,7 @@ Date formatting time_24h = colDef(format = colFormat(time = TRUE, hour12 = FALSE)),
datetime_pt_BR = colDef(format = colFormat(datetime = TRUE, locales = "pt-BR"))
))
-
+
Currency formatting
@@ -2632,7 +2633,7 @@ Currency formatting= colFormat(currency = "MAD", separators = TRUE, locales = "ar-MA")
)
))
-
+
Formatting aggregated cells
@@ -2729,7 +2730,7 @@ Formatting aggregated cells)
)
)
-
+
Displaying missing values
@@ -2791,7 +2792,7 @@ Displaying missing values y = colDef(na = "NA", format = colFormat(percent = TRUE))
)
)
-
+
Custom data formatting
@@ -2884,7 +2885,7 @@ R render functionpaste0("$", format(value * 1000, big.mark = ","))
})
))
-
+
JavaScript render function
@@ -2974,7 +2975,7 @@ JavaScript render function }
"))
))
-
+
Embedding HTML widgets
@@ -3060,7 +3061,7 @@ Embedding HTML widgets sparkline(data$weight[[index]])
})
))
-
+
reactable(iris[1:5, ], showSortIcon = FALSE)
@@ -811,7 +812,7 @@
-Filteringdata <- MASS::Cars93[1:20, c("Manufacturer", "Model", "Type", "AirBags", "Price")] reactable(data, filterable = TRUE, minRows = 10)
+
@@ -924,7 +925,7 @@ Filtering{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric"}],"filterable":true,"minRows":10,"dataKey":"55e896d6e49b979ddd4597432695f612"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
Filtering{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric"}],"filterable":true,"minRows":10,"dataKey":"55e896d6e49b979ddd4597432695f612"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}To make specific columns filterable (or not), set
+
To make specific columns filterable (or not), set
filterable to TRUE or FALSE in
colDef():
@@ -936,7 +937,7 @@ Filtering),
defaultPageSize = 5
)
-
+
@@ -1014,7 +1015,7 @@ Filtering{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric","filterable":false}],"filterable":true,"defaultPageSize":5,"dataKey":"29704e01ca83ef47032806b9ddd3271b"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Custom filtering
Column filtering can be customized using the
@@ -1043,7 +1044,7 @@
Custom filtering ),
defaultPageSize = 5
)
-
+
@@ -1123,7 +1124,7 @@ Searchingdata <- MASS::Cars93[1:20, c("Manufacturer", "Model", "Type", "AirBags", "Price")]
reactable(data, searchable = TRUE, minRows = 10)
-
+
@@ -1227,7 +1228,7 @@ Searching{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric"}],"searchable":true,"minRows":10,"dataKey":"55e896d6e49b979ddd4597432695f612"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Custom searching
The table search method can be customized using the
@@ -1243,7 +1244,7 @@
Pagination
reactable(iris[1:6, ], defaultPageSize = 4)
-
+
@@ -1302,12 +1303,12 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"defaultPageSize":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}You can also set the minimum rows per page using
+
You can also set the minimum rows per page using
minRows. This may be useful when rows don’t completely fill
the page, or if the table has filtering:
reactable(iris[1:6, ], defaultPageSize = 4, minRows = 4, searchable = TRUE)
-
+
@@ -1366,7 +1367,7 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"searchable":true,"defaultPageSize":4,"minRows":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Page size options
You can show a dropdown of page sizes for users to choose from using
@@ -1379,7 +1380,7 @@
Page size options= c(4, 8, 12),
defaultPageSize = 4
)
-
+
Alternative pagination types
@@ -1462,7 +1463,7 @@ Page jump
reactable(iris[1:50, ], paginationType = "jump", defaultPageSize = 4)
-
+
Simple
reactable(iris[1:50, ], paginationType = "simple", defaultPageSize = 4)
-
+
@@ -1600,7 +1601,7 @@ Hide page infoFALSE:
reactable(iris[1:12, ], showPageInfo = FALSE, defaultPageSize = 4)
-
+
-
+
reactable(iris[1:12, ], showPageInfo = FALSE, showPageSizeOptions = TRUE, defaultPageSize = 4)
-
+
Always show pagination
@@ -1735,7 +1736,7 @@ Always show pagination
reactable(iris[1:5, ], showPagination = TRUE)
-
+
No pagination
@@ -1810,7 +1811,7 @@ No pagination
reactable(iris[1:20, ], pagination = FALSE, highlight = TRUE, height = 250)
-
+
-
+
Tip: Disabling pagination is not recommended for
large tables with many interactive elements (such as links, expand
buttons, or selection checkboxes), as that can make it difficult for
@@ -1990,7 +1991,7 @@
Grouping and Aggregationdata <- MASS::Cars93[10:22, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Manufacturer")
-
+
-When rows are grouped, you can aggregate data in a column using an
+
When rows are grouped, you can aggregate data in a column using an
aggregate function:
data <- MASS::Cars93[14:38, c("Type", "Price", "MPG.city", "DriveTrain", "Man.trans.avail")]
@@ -2062,7 +2063,7 @@ Grouping and Aggregation Man.trans.avail = colDef(aggregate = "frequency")
)
)
-
+
-You can use one of the built-in aggregate functions:
+You can use one of the built-in aggregate functions:
colDef(aggregate = "sum") # Sum of numbers
colDef(aggregate = "mean") # Mean of numbers
@@ -2180,7 +2181,7 @@ Multiple groups ),
bordered = TRUE
)
-
+
Custom aggregate function
@@ -2242,21 +2243,21 @@ Custom aggregate functionWithin a custom aggregate function, you can access the values in the
column using the values argument, and the values in other
columns using the rows argument:
-columns = list(
- Price = colDef(
- aggregate = JS("function(values, rows) {
- values
- // [46.8, 27.6, 57]
-
- rows
- // [
- // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
- // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
- // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
- // ]
- }")
- )
-)
+columns = list(
+ Price = colDef(
+ aggregate = JS("function(values, rows) {
+ values
+ // [46.8, 27.6, 57]
+
+ rows
+ // [
+ // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
+ // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
+ // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
+ // ]
+ }")
+ )
+)
Here’s an example that calculates an aggregate average price by
dividing the the sum of two columns, Price and
Units:
@@ -2291,7 +2292,7 @@ Custom aggregate function )
)
)
-
+
Include sub rows in pagination
@@ -2361,7 +2362,7 @@ Include sub rows in paginationdata <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Type", paginateSubRows = TRUE)
-
+
@@ -2482,7 +2483,7 @@ Column Formatting= colDef(format = colFormat(percent = TRUE, digits = 1)),
date = colDef(format = colFormat(date = TRUE, locales = "en-GB"))
))
-
+
-
+
Date formatting
@@ -2553,7 +2554,7 @@ Date formatting time_24h = colDef(format = colFormat(time = TRUE, hour12 = FALSE)),
datetime_pt_BR = colDef(format = colFormat(datetime = TRUE, locales = "pt-BR"))
))
-
+
Currency formatting
@@ -2632,7 +2633,7 @@ Currency formatting= colFormat(currency = "MAD", separators = TRUE, locales = "ar-MA")
)
))
-
+
Formatting aggregated cells
@@ -2729,7 +2730,7 @@ Formatting aggregated cells)
)
)
-
+
Displaying missing values
@@ -2791,7 +2792,7 @@ Displaying missing values y = colDef(na = "NA", format = colFormat(percent = TRUE))
)
)
-
+
Custom data formatting
@@ -2884,7 +2885,7 @@ R render functionpaste0("$", format(value * 1000, big.mark = ","))
})
))
-
+
JavaScript render function
@@ -2974,7 +2975,7 @@ JavaScript render function }
"))
))
-
+
Embedding HTML widgets
@@ -3060,7 +3061,7 @@ Embedding HTML widgets sparkline(data$weight[[index]])
})
))
-
+
filterable to TRUE or FALSE in
colDef():@@ -936,7 +937,7 @@Filtering), defaultPageSize = 5 )
+
@@ -1014,7 +1015,7 @@ Filtering{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric","filterable":false}],"filterable":true,"defaultPageSize":5,"dataKey":"29704e01ca83ef47032806b9ddd3271b"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
Filtering{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric","filterable":false}],"filterable":true,"defaultPageSize":5,"dataKey":"29704e01ca83ef47032806b9ddd3271b"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Custom filtering
Column filtering can be customized using the
@@ -1043,7 +1044,7 @@
Custom filtering ),
defaultPageSize = 5
)
-
+
@@ -1123,7 +1124,7 @@ Searchingdata <- MASS::Cars93[1:20, c("Manufacturer", "Model", "Type", "AirBags", "Price")]
reactable(data, searchable = TRUE, minRows = 10)
-
+
@@ -1227,7 +1228,7 @@ Searching{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric"}],"searchable":true,"minRows":10,"dataKey":"55e896d6e49b979ddd4597432695f612"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Custom searching
The table search method can be customized using the
@@ -1243,7 +1244,7 @@
Pagination
reactable(iris[1:6, ], defaultPageSize = 4)
-
+
@@ -1302,12 +1303,12 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"defaultPageSize":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}You can also set the minimum rows per page using
+
You can also set the minimum rows per page using
minRows. This may be useful when rows don’t completely fill
the page, or if the table has filtering:
reactable(iris[1:6, ], defaultPageSize = 4, minRows = 4, searchable = TRUE)
-
+
@@ -1366,7 +1367,7 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"searchable":true,"defaultPageSize":4,"minRows":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Page size options
You can show a dropdown of page sizes for users to choose from using
@@ -1379,7 +1380,7 @@
Page size options= c(4, 8, 12),
defaultPageSize = 4
)
-
+
Alternative pagination types
@@ -1462,7 +1463,7 @@ Page jump
reactable(iris[1:50, ], paginationType = "jump", defaultPageSize = 4)
-
+
Simple
reactable(iris[1:50, ], paginationType = "simple", defaultPageSize = 4)
-
+
@@ -1600,7 +1601,7 @@ Hide page infoFALSE:
reactable(iris[1:12, ], showPageInfo = FALSE, defaultPageSize = 4)
-
+
-
+
reactable(iris[1:12, ], showPageInfo = FALSE, showPageSizeOptions = TRUE, defaultPageSize = 4)
-
+
Always show pagination
@@ -1735,7 +1736,7 @@ Always show pagination
reactable(iris[1:5, ], showPagination = TRUE)
-
+
No pagination
@@ -1810,7 +1811,7 @@ No pagination
reactable(iris[1:20, ], pagination = FALSE, highlight = TRUE, height = 250)
-
+
-
+
Tip: Disabling pagination is not recommended for
large tables with many interactive elements (such as links, expand
buttons, or selection checkboxes), as that can make it difficult for
@@ -1990,7 +1991,7 @@
Grouping and Aggregationdata <- MASS::Cars93[10:22, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Manufacturer")
-
+
-When rows are grouped, you can aggregate data in a column using an
+
When rows are grouped, you can aggregate data in a column using an
aggregate function:
data <- MASS::Cars93[14:38, c("Type", "Price", "MPG.city", "DriveTrain", "Man.trans.avail")]
@@ -2062,7 +2063,7 @@ Grouping and Aggregation Man.trans.avail = colDef(aggregate = "frequency")
)
)
-
+
-You can use one of the built-in aggregate functions:
+You can use one of the built-in aggregate functions:
colDef(aggregate = "sum") # Sum of numbers
colDef(aggregate = "mean") # Mean of numbers
@@ -2180,7 +2181,7 @@ Multiple groups ),
bordered = TRUE
)
-
+
Custom aggregate function
@@ -2242,21 +2243,21 @@ Custom aggregate functionWithin a custom aggregate function, you can access the values in the
column using the values argument, and the values in other
columns using the rows argument:
-columns = list(
- Price = colDef(
- aggregate = JS("function(values, rows) {
- values
- // [46.8, 27.6, 57]
-
- rows
- // [
- // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
- // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
- // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
- // ]
- }")
- )
-)
+columns = list(
+ Price = colDef(
+ aggregate = JS("function(values, rows) {
+ values
+ // [46.8, 27.6, 57]
+
+ rows
+ // [
+ // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
+ // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
+ // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
+ // ]
+ }")
+ )
+)
Here’s an example that calculates an aggregate average price by
dividing the the sum of two columns, Price and
Units:
@@ -2291,7 +2292,7 @@ Custom aggregate function )
)
)
-
+
Include sub rows in pagination
@@ -2361,7 +2362,7 @@ Include sub rows in paginationdata <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Type", paginateSubRows = TRUE)
-
+
@@ -2482,7 +2483,7 @@ Column Formatting= colDef(format = colFormat(percent = TRUE, digits = 1)),
date = colDef(format = colFormat(date = TRUE, locales = "en-GB"))
))
-
+
-
+
Date formatting
@@ -2553,7 +2554,7 @@ Date formatting time_24h = colDef(format = colFormat(time = TRUE, hour12 = FALSE)),
datetime_pt_BR = colDef(format = colFormat(datetime = TRUE, locales = "pt-BR"))
))
-
+
Currency formatting
@@ -2632,7 +2633,7 @@ Currency formatting= colFormat(currency = "MAD", separators = TRUE, locales = "ar-MA")
)
))
-
+
Formatting aggregated cells
@@ -2729,7 +2730,7 @@ Formatting aggregated cells)
)
)
-
+
Displaying missing values
@@ -2791,7 +2792,7 @@ Displaying missing values y = colDef(na = "NA", format = colFormat(percent = TRUE))
)
)
-
+
Custom data formatting
@@ -2884,7 +2885,7 @@ R render functionpaste0("$", format(value * 1000, big.mark = ","))
})
))
-
+
JavaScript render function
@@ -2974,7 +2975,7 @@ JavaScript render function }
"))
))
-
+
Embedding HTML widgets
@@ -3060,7 +3061,7 @@ Embedding HTML widgets sparkline(data$weight[[index]])
})
))
-
+
Custom filtering
Column filtering can be customized using the @@ -1043,7 +1044,7 @@
Custom filtering ), defaultPageSize = 5 )
+
@@ -1123,7 +1124,7 @@
-Searchingdata <- MASS::Cars93[1:20, c("Manufacturer", "Model", "Type", "AirBags", "Price")] reactable(data, searchable = TRUE, minRows = 10)
+
@@ -1227,7 +1228,7 @@ Searching{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric"}],"searchable":true,"minRows":10,"dataKey":"55e896d6e49b979ddd4597432695f612"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
Searching{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Manufacturer":["Acura","Acura","Audi","Audi","BMW","Buick","Buick","Buick","Buick","Cadillac","Cadillac","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chevrolet","Chrylser"],"Model":["Integra","Legend","90","100","535i","Century","LeSabre","Roadmaster","Riviera","DeVille","Seville","Cavalier","Corsica","Camaro","Lumina","Lumina_APV","Astro","Caprice","Corvette","Concorde"],"Type":["Small","Midsize","Compact","Midsize","Midsize","Midsize","Large","Large","Midsize","Large","Midsize","Compact","Compact","Sporty","Midsize","Van","Van","Large","Sporty","Large"],"AirBags":["None","Driver & Passenger","Driver only","Driver & Passenger","Driver only","Driver only","Driver only","Driver only","Driver only","Driver only","Driver & Passenger","None","Driver only","Driver & Passenger","None","None","None","Driver only","Driver only","Driver & Passenger"],"Price":[15.9,33.9,29.1,37.7,30,15.7,20.8,23.7,26.3,34.7,40.1,13.4,11.4,15.1,15.9,16.3,16.6,18.8,38,18.4]},"columns":[{"id":"Manufacturer","name":"Manufacturer","type":"factor"},{"id":"Model","name":"Model","type":"factor"},{"id":"Type","name":"Type","type":"factor"},{"id":"AirBags","name":"AirBags","type":"factor"},{"id":"Price","name":"Price","type":"numeric"}],"searchable":true,"minRows":10,"dataKey":"55e896d6e49b979ddd4597432695f612"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Custom searching
The table search method can be customized using the
@@ -1243,7 +1244,7 @@
Pagination
reactable(iris[1:6, ], defaultPageSize = 4)
-
+
@@ -1302,12 +1303,12 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"defaultPageSize":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}You can also set the minimum rows per page using
+
You can also set the minimum rows per page using
minRows. This may be useful when rows don’t completely fill
the page, or if the table has filtering:
reactable(iris[1:6, ], defaultPageSize = 4, minRows = 4, searchable = TRUE)
-
+
@@ -1366,7 +1367,7 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"searchable":true,"defaultPageSize":4,"minRows":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Page size options
You can show a dropdown of page sizes for users to choose from using
@@ -1379,7 +1380,7 @@
Page size options= c(4, 8, 12),
defaultPageSize = 4
)
-
+
Alternative pagination types
@@ -1462,7 +1463,7 @@ Page jump
reactable(iris[1:50, ], paginationType = "jump", defaultPageSize = 4)
-
+
Simple
reactable(iris[1:50, ], paginationType = "simple", defaultPageSize = 4)
-
+
@@ -1600,7 +1601,7 @@ Hide page infoFALSE:
reactable(iris[1:12, ], showPageInfo = FALSE, defaultPageSize = 4)
-
+
-
+
reactable(iris[1:12, ], showPageInfo = FALSE, showPageSizeOptions = TRUE, defaultPageSize = 4)
-
+
Always show pagination
@@ -1735,7 +1736,7 @@ Always show pagination
reactable(iris[1:5, ], showPagination = TRUE)
-
+
No pagination
@@ -1810,7 +1811,7 @@ No pagination
reactable(iris[1:20, ], pagination = FALSE, highlight = TRUE, height = 250)
-
+
-
+
Tip: Disabling pagination is not recommended for
large tables with many interactive elements (such as links, expand
buttons, or selection checkboxes), as that can make it difficult for
@@ -1990,7 +1991,7 @@
Grouping and Aggregationdata <- MASS::Cars93[10:22, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Manufacturer")
-
+
-When rows are grouped, you can aggregate data in a column using an
+
When rows are grouped, you can aggregate data in a column using an
aggregate function:
data <- MASS::Cars93[14:38, c("Type", "Price", "MPG.city", "DriveTrain", "Man.trans.avail")]
@@ -2062,7 +2063,7 @@ Grouping and Aggregation Man.trans.avail = colDef(aggregate = "frequency")
)
)
-
+
-You can use one of the built-in aggregate functions:
+You can use one of the built-in aggregate functions:
colDef(aggregate = "sum") # Sum of numbers
colDef(aggregate = "mean") # Mean of numbers
@@ -2180,7 +2181,7 @@ Multiple groups ),
bordered = TRUE
)
-
+
Custom aggregate function
@@ -2242,21 +2243,21 @@ Custom aggregate functionWithin a custom aggregate function, you can access the values in the
column using the values argument, and the values in other
columns using the rows argument:
-columns = list(
- Price = colDef(
- aggregate = JS("function(values, rows) {
- values
- // [46.8, 27.6, 57]
-
- rows
- // [
- // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
- // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
- // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
- // ]
- }")
- )
-)
+columns = list(
+ Price = colDef(
+ aggregate = JS("function(values, rows) {
+ values
+ // [46.8, 27.6, 57]
+
+ rows
+ // [
+ // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
+ // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
+ // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
+ // ]
+ }")
+ )
+)
Here’s an example that calculates an aggregate average price by
dividing the the sum of two columns, Price and
Units:
@@ -2291,7 +2292,7 @@ Custom aggregate function )
)
)
-
+
Include sub rows in pagination
@@ -2361,7 +2362,7 @@ Include sub rows in paginationdata <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Type", paginateSubRows = TRUE)
-
+
@@ -2482,7 +2483,7 @@ Column Formatting= colDef(format = colFormat(percent = TRUE, digits = 1)),
date = colDef(format = colFormat(date = TRUE, locales = "en-GB"))
))
-
+
-
+
Date formatting
@@ -2553,7 +2554,7 @@ Date formatting time_24h = colDef(format = colFormat(time = TRUE, hour12 = FALSE)),
datetime_pt_BR = colDef(format = colFormat(datetime = TRUE, locales = "pt-BR"))
))
-
+
Currency formatting
@@ -2632,7 +2633,7 @@ Currency formatting= colFormat(currency = "MAD", separators = TRUE, locales = "ar-MA")
)
))
-
+
Formatting aggregated cells
@@ -2729,7 +2730,7 @@ Formatting aggregated cells)
)
)
-
+
Displaying missing values
@@ -2791,7 +2792,7 @@ Displaying missing values y = colDef(na = "NA", format = colFormat(percent = TRUE))
)
)
-
+
Custom data formatting
@@ -2884,7 +2885,7 @@ R render functionpaste0("$", format(value * 1000, big.mark = ","))
})
))
-
+
JavaScript render function
@@ -2974,7 +2975,7 @@ JavaScript render function }
"))
))
-
+
Embedding HTML widgets
@@ -3060,7 +3061,7 @@ Embedding HTML widgets sparkline(data$weight[[index]])
})
))
-
+
Custom searching
The table search method can be customized using the @@ -1243,7 +1244,7 @@
Pagination
reactable(iris[1:6, ], defaultPageSize = 4)
reactable(iris[1:6, ], defaultPageSize = 4)
+
@@ -1302,12 +1303,12 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"defaultPageSize":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"defaultPageSize":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}You can also set the minimum rows per page using
+
You can also set the minimum rows per page using
minRows. This may be useful when rows don’t completely fill
the page, or if the table has filtering:
reactable(iris[1:6, ], defaultPageSize = 4, minRows = 4, searchable = TRUE)
-
+
@@ -1366,7 +1367,7 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"searchable":true,"defaultPageSize":4,"minRows":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Page size options
You can show a dropdown of page sizes for users to choose from using
@@ -1379,7 +1380,7 @@
Page size options= c(4, 8, 12),
defaultPageSize = 4
)
-
+
Alternative pagination types
@@ -1462,7 +1463,7 @@ Page jump
reactable(iris[1:50, ], paginationType = "jump", defaultPageSize = 4)
-
+
Simple
reactable(iris[1:50, ], paginationType = "simple", defaultPageSize = 4)
-
+
@@ -1600,7 +1601,7 @@ Hide page infoFALSE:
reactable(iris[1:12, ], showPageInfo = FALSE, defaultPageSize = 4)
-
+
-
+
reactable(iris[1:12, ], showPageInfo = FALSE, showPageSizeOptions = TRUE, defaultPageSize = 4)
-
+
Always show pagination
@@ -1735,7 +1736,7 @@ Always show pagination
reactable(iris[1:5, ], showPagination = TRUE)
-
+
No pagination
@@ -1810,7 +1811,7 @@ No pagination
reactable(iris[1:20, ], pagination = FALSE, highlight = TRUE, height = 250)
-
+
-
+
Tip: Disabling pagination is not recommended for
large tables with many interactive elements (such as links, expand
buttons, or selection checkboxes), as that can make it difficult for
@@ -1990,7 +1991,7 @@
Grouping and Aggregationdata <- MASS::Cars93[10:22, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Manufacturer")
-
+
-When rows are grouped, you can aggregate data in a column using an
+
When rows are grouped, you can aggregate data in a column using an
aggregate function:
data <- MASS::Cars93[14:38, c("Type", "Price", "MPG.city", "DriveTrain", "Man.trans.avail")]
@@ -2062,7 +2063,7 @@ Grouping and Aggregation Man.trans.avail = colDef(aggregate = "frequency")
)
)
-
+
-You can use one of the built-in aggregate functions:
+You can use one of the built-in aggregate functions:
colDef(aggregate = "sum") # Sum of numbers
colDef(aggregate = "mean") # Mean of numbers
@@ -2180,7 +2181,7 @@ Multiple groups ),
bordered = TRUE
)
-
+
Custom aggregate function
@@ -2242,21 +2243,21 @@ Custom aggregate functionWithin a custom aggregate function, you can access the values in the
column using the values argument, and the values in other
columns using the rows argument:
-columns = list(
- Price = colDef(
- aggregate = JS("function(values, rows) {
- values
- // [46.8, 27.6, 57]
-
- rows
- // [
- // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
- // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
- // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
- // ]
- }")
- )
-)
+columns = list(
+ Price = colDef(
+ aggregate = JS("function(values, rows) {
+ values
+ // [46.8, 27.6, 57]
+
+ rows
+ // [
+ // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
+ // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
+ // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
+ // ]
+ }")
+ )
+)
Here’s an example that calculates an aggregate average price by
dividing the the sum of two columns, Price and
Units:
@@ -2291,7 +2292,7 @@ Custom aggregate function )
)
)
-
+
Include sub rows in pagination
@@ -2361,7 +2362,7 @@ Include sub rows in paginationdata <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Type", paginateSubRows = TRUE)
-
+
@@ -2482,7 +2483,7 @@ Column Formatting= colDef(format = colFormat(percent = TRUE, digits = 1)),
date = colDef(format = colFormat(date = TRUE, locales = "en-GB"))
))
-
+
-
+
Date formatting
@@ -2553,7 +2554,7 @@ Date formatting time_24h = colDef(format = colFormat(time = TRUE, hour12 = FALSE)),
datetime_pt_BR = colDef(format = colFormat(datetime = TRUE, locales = "pt-BR"))
))
-
+
Currency formatting
@@ -2632,7 +2633,7 @@ Currency formatting= colFormat(currency = "MAD", separators = TRUE, locales = "ar-MA")
)
))
-
+
Formatting aggregated cells
@@ -2729,7 +2730,7 @@ Formatting aggregated cells)
)
)
-
+
Displaying missing values
@@ -2791,7 +2792,7 @@ Displaying missing values y = colDef(na = "NA", format = colFormat(percent = TRUE))
)
)
-
+
Custom data formatting
@@ -2884,7 +2885,7 @@ R render functionpaste0("$", format(value * 1000, big.mark = ","))
})
))
-
+
JavaScript render function
@@ -2974,7 +2975,7 @@ JavaScript render function }
"))
))
-
+
Embedding HTML widgets
@@ -3060,7 +3061,7 @@ Embedding HTML widgets sparkline(data$weight[[index]])
})
))
-
+
minRows. This may be useful when rows don’t completely fill
the page, or if the table has filtering:
reactable(iris[1:6, ], defaultPageSize = 4, minRows = 4, searchable = TRUE)
+
@@ -1366,7 +1367,7 @@ Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"searchable":true,"defaultPageSize":4,"minRows":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
Pagination{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Sepal.Length":[5.1,4.9,4.7,4.6,5,5.4],"Sepal.Width":[3.5,3,3.2,3.1,3.6,3.9],"Petal.Length":[1.4,1.4,1.3,1.5,1.4,1.7],"Petal.Width":[0.2,0.2,0.2,0.2,0.2,0.4],"Species":["setosa","setosa","setosa","setosa","setosa","setosa"]},"columns":[{"id":"Sepal.Length","name":"Sepal.Length","type":"numeric"},{"id":"Sepal.Width","name":"Sepal.Width","type":"numeric"},{"id":"Petal.Length","name":"Petal.Length","type":"numeric"},{"id":"Petal.Width","name":"Petal.Width","type":"numeric"},{"id":"Species","name":"Species","type":"factor"}],"searchable":true,"defaultPageSize":4,"minRows":4,"dataKey":"6cc0494dfe181a040ad2dea9b85ee3d1"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}
+
Page size options
You can show a dropdown of page sizes for users to choose from using
@@ -1379,7 +1380,7 @@
Page size options= c(4, 8, 12),
defaultPageSize = 4
)
-
+
Alternative pagination types
@@ -1462,7 +1463,7 @@ Page jump
reactable(iris[1:50, ], paginationType = "jump", defaultPageSize = 4)
-
+
Simple
reactable(iris[1:50, ], paginationType = "simple", defaultPageSize = 4)
-
+
@@ -1600,7 +1601,7 @@ Hide page infoFALSE:
reactable(iris[1:12, ], showPageInfo = FALSE, defaultPageSize = 4)
-
+
-
+
reactable(iris[1:12, ], showPageInfo = FALSE, showPageSizeOptions = TRUE, defaultPageSize = 4)
-
+
Always show pagination
@@ -1735,7 +1736,7 @@ Always show pagination
reactable(iris[1:5, ], showPagination = TRUE)
-
+
No pagination
@@ -1810,7 +1811,7 @@ No pagination
reactable(iris[1:20, ], pagination = FALSE, highlight = TRUE, height = 250)
-
+
-
+
Tip: Disabling pagination is not recommended for
large tables with many interactive elements (such as links, expand
buttons, or selection checkboxes), as that can make it difficult for
@@ -1990,7 +1991,7 @@
Grouping and Aggregationdata <- MASS::Cars93[10:22, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Manufacturer")
-
+
-When rows are grouped, you can aggregate data in a column using an
+
When rows are grouped, you can aggregate data in a column using an
aggregate function:
data <- MASS::Cars93[14:38, c("Type", "Price", "MPG.city", "DriveTrain", "Man.trans.avail")]
@@ -2062,7 +2063,7 @@ Grouping and Aggregation Man.trans.avail = colDef(aggregate = "frequency")
)
)
-
+
-You can use one of the built-in aggregate functions:
+You can use one of the built-in aggregate functions:
colDef(aggregate = "sum") # Sum of numbers
colDef(aggregate = "mean") # Mean of numbers
@@ -2180,7 +2181,7 @@ Multiple groups ),
bordered = TRUE
)
-
+
Custom aggregate function
@@ -2242,21 +2243,21 @@ Custom aggregate functionWithin a custom aggregate function, you can access the values in the
column using the values argument, and the values in other
columns using the rows argument:
-columns = list(
- Price = colDef(
- aggregate = JS("function(values, rows) {
- values
- // [46.8, 27.6, 57]
-
- rows
- // [
- // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
- // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
- // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
- // ]
- }")
- )
-)
+columns = list(
+ Price = colDef(
+ aggregate = JS("function(values, rows) {
+ values
+ // [46.8, 27.6, 57]
+
+ rows
+ // [
+ // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
+ // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
+ // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
+ // ]
+ }")
+ )
+)
Here’s an example that calculates an aggregate average price by
dividing the the sum of two columns, Price and
Units:
@@ -2291,7 +2292,7 @@ Custom aggregate function )
)
)
-
+
Include sub rows in pagination
@@ -2361,7 +2362,7 @@ Include sub rows in paginationdata <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Type", paginateSubRows = TRUE)
-
+
@@ -2482,7 +2483,7 @@ Column Formatting= colDef(format = colFormat(percent = TRUE, digits = 1)),
date = colDef(format = colFormat(date = TRUE, locales = "en-GB"))
))
-
+
-
+
Date formatting
@@ -2553,7 +2554,7 @@ Date formatting time_24h = colDef(format = colFormat(time = TRUE, hour12 = FALSE)),
datetime_pt_BR = colDef(format = colFormat(datetime = TRUE, locales = "pt-BR"))
))
-
+
Currency formatting
@@ -2632,7 +2633,7 @@ Currency formatting= colFormat(currency = "MAD", separators = TRUE, locales = "ar-MA")
)
))
-
+
Formatting aggregated cells
@@ -2729,7 +2730,7 @@ Formatting aggregated cells)
)
)
-
+
Displaying missing values
@@ -2791,7 +2792,7 @@ Displaying missing values y = colDef(na = "NA", format = colFormat(percent = TRUE))
)
)
-
+
Custom data formatting
@@ -2884,7 +2885,7 @@ R render functionpaste0("$", format(value * 1000, big.mark = ","))
})
))
-
+
JavaScript render function
@@ -2974,7 +2975,7 @@ JavaScript render function }
"))
))
-
+
Embedding HTML widgets
@@ -3060,7 +3061,7 @@ Embedding HTML widgets sparkline(data$weight[[index]])
})
))
-
+
Page size options
You can show a dropdown of page sizes for users to choose from using @@ -1379,7 +1380,7 @@
Page size options= c(4, 8, 12), defaultPageSize = 4 )
+
Alternative pagination types
@@ -1462,7 +1463,7 @@
-
Alternative pagination types
@@ -1462,7 +1463,7 @@ Page jump
reactable(iris[1:50, ], paginationType = "jump", defaultPageSize = 4)
reactable(iris[1:50, ], paginationType = "jump", defaultPageSize = 4)
+
-
Simple
reactable(iris[1:50, ], paginationType = "simple", defaultPageSize = 4)
+
@@ -1600,7 +1601,7 @@ Hide page infoFALSE:
Hide page infoFALSE:
reactable(iris[1:12, ], showPageInfo = FALSE, defaultPageSize = 4)
-
+
-
+
reactable(iris[1:12, ], showPageInfo = FALSE, showPageSizeOptions = TRUE, defaultPageSize = 4)
-
+
Always show pagination
@@ -1735,7 +1736,7 @@ Always show pagination
reactable(iris[1:5, ], showPagination = TRUE)
-
+
No pagination
@@ -1810,7 +1811,7 @@ No pagination
reactable(iris[1:20, ], pagination = FALSE, highlight = TRUE, height = 250)
-
+
-
+
Tip: Disabling pagination is not recommended for
large tables with many interactive elements (such as links, expand
buttons, or selection checkboxes), as that can make it difficult for
@@ -1990,7 +1991,7 @@
Grouping and Aggregationdata <- MASS::Cars93[10:22, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Manufacturer")
-
+
-When rows are grouped, you can aggregate data in a column using an
+
When rows are grouped, you can aggregate data in a column using an
aggregate function:
data <- MASS::Cars93[14:38, c("Type", "Price", "MPG.city", "DriveTrain", "Man.trans.avail")]
@@ -2062,7 +2063,7 @@ Grouping and Aggregation Man.trans.avail = colDef(aggregate = "frequency")
)
)
-
+
-You can use one of the built-in aggregate functions:
+You can use one of the built-in aggregate functions:
colDef(aggregate = "sum") # Sum of numbers
colDef(aggregate = "mean") # Mean of numbers
@@ -2180,7 +2181,7 @@ Multiple groups ),
bordered = TRUE
)
-
+
Custom aggregate function
@@ -2242,21 +2243,21 @@ Custom aggregate functionWithin a custom aggregate function, you can access the values in the
column using the values argument, and the values in other
columns using the rows argument:
-columns = list(
- Price = colDef(
- aggregate = JS("function(values, rows) {
- values
- // [46.8, 27.6, 57]
-
- rows
- // [
- // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
- // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
- // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
- // ]
- }")
- )
-)
+columns = list(
+ Price = colDef(
+ aggregate = JS("function(values, rows) {
+ values
+ // [46.8, 27.6, 57]
+
+ rows
+ // [
+ // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 },
+ // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 },
+ // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 }
+ // ]
+ }")
+ )
+)
Here’s an example that calculates an aggregate average price by
dividing the the sum of two columns, Price and
Units:
@@ -2291,7 +2292,7 @@ Custom aggregate function )
)
)
-
+
Include sub rows in pagination
@@ -2361,7 +2362,7 @@ Include sub rows in paginationdata <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]
reactable(data, groupBy = "Type", paginateSubRows = TRUE)
-
+
@@ -2482,7 +2483,7 @@ Column Formatting= colDef(format = colFormat(percent = TRUE, digits = 1)),
date = colDef(format = colFormat(date = TRUE, locales = "en-GB"))
))
-
+
-
+
Date formatting
@@ -2553,7 +2554,7 @@ Date formatting time_24h = colDef(format = colFormat(time = TRUE, hour12 = FALSE)),
datetime_pt_BR = colDef(format = colFormat(datetime = TRUE, locales = "pt-BR"))
))
-
+
Currency formatting
@@ -2632,7 +2633,7 @@ Currency formatting= colFormat(currency = "MAD", separators = TRUE, locales = "ar-MA")
)
))
-
+
Formatting aggregated cells
@@ -2729,7 +2730,7 @@ Formatting aggregated cells)
)
)
-
+
Displaying missing values
@@ -2791,7 +2792,7 @@ Displaying missing values y = colDef(na = "NA", format = colFormat(percent = TRUE))
)
)
-
+
Custom data formatting
@@ -2884,7 +2885,7 @@ R render functionpaste0("$", format(value * 1000, big.mark = ","))
})
))
-
+
JavaScript render function
@@ -2974,7 +2975,7 @@ JavaScript render function }
"))
))
-
+
Embedding HTML widgets
@@ -3060,7 +3061,7 @@ Embedding HTML widgets sparkline(data$weight[[index]])
})
))
-
+
reactable(iris[1:12, ], showPageInfo = FALSE, defaultPageSize = 4)
+
-
+-reactable(iris[1:12, ], showPageInfo = FALSE, showPageSizeOptions = TRUE, defaultPageSize = 4)+Always show pagination @@ -1735,7 +1736,7 @@
Always show pagination
-reactable(iris[1:5, ], showPagination = TRUE)+-No pagination @@ -1810,7 +1811,7 @@
No pagination
reactable(iris[1:20, ], pagination = FALSE, highlight = TRUE, height = 250)+-+-Tip: Disabling pagination is not recommended for large tables with many interactive elements (such as links, expand buttons, or selection checkboxes), as that can make it difficult for @@ -1990,7 +1991,7 @@
Grouping and Aggregationdata <- MASS::Cars93[10:22, c("Manufacturer", "Model", "Type", "Price", "MPG.city")] reactable(data, groupBy = "Manufacturer")
+-When rows are grouped, you can aggregate data in a column using an +
When rows are grouped, you can aggregate data in a column using an
aggregatefunction:-data <- MASS::Cars93[14:38, c("Type", "Price", "MPG.city", "DriveTrain", "Man.trans.avail")] @@ -2062,7 +2063,7 @@Grouping and Aggregation Man.trans.avail = colDef(aggregate = "frequency") ) )
+-You can use one of the built-in aggregate functions:
+You can use one of the built-in aggregate functions:
-colDef(aggregate = "sum") # Sum of numbers colDef(aggregate = "mean") # Mean of numbers @@ -2180,7 +2181,7 @@Multiple groups ), bordered = TRUE )
+-Custom aggregate function @@ -2242,21 +2243,21 @@
Custom aggregate functionWithin a custom aggregate function, you can access the values in the column using the
valuesargument, and the values in other columns using therowsargument: -+columns = list( - Price = colDef( - aggregate = JS("function(values, rows) { - values - // [46.8, 27.6, 57] - - rows - // [ - // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 }, - // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 }, - // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 } - // ] - }") - ) -)columns = list( + Price = colDef( + aggregate = JS("function(values, rows) { + values + // [46.8, 27.6, 57] + + rows + // [ + // { "Model": "Dynasty", "Manufacturer": "Dodge", "Price": 46.8, "Units": 2 }, + // { "Model": "Colt", "Manufacturer": "Dodge", "Price": 27.6, "Units": 5 }, + // { "Model": "Caravan", "Manufacturer": "Dodge", "Price": 57, "Units": 5 } + // ] + }") + ) +)Here’s an example that calculates an aggregate average price by dividing the the sum of two columns,
@@ -2291,7 +2292,7 @@PriceandUnits:Custom aggregate function ) ) )
+-Include sub rows in pagination @@ -2361,7 +2362,7 @@
Include sub rows in paginationdata <- MASS::Cars93[, c("Manufacturer", "Model", "Type", "Price", "MPG.city")] reactable(data, groupBy = "Type", paginateSubRows = TRUE)
+@@ -2482,7 +2483,7 @@-Column Formatting= colDef(format = colFormat(percent = TRUE, digits = 1)), date = colDef(format = colFormat(date = TRUE, locales = "en-GB")) ))
+-+Date formatting
-@@ -2553,7 +2554,7 @@Date formatting time_24h = colDef(format = colFormat(time = TRUE, hour12 = FALSE)), datetime_pt_BR = colDef(format = colFormat(datetime = TRUE, locales = "pt-BR")) ))
+-Currency formatting @@ -2632,7 +2633,7 @@
Currency formatting= colFormat(currency = "MAD", separators = TRUE, locales = "ar-MA") ) ))
+-Formatting aggregated cells @@ -2729,7 +2730,7 @@
Formatting aggregated cells) ) )
+-Displaying missing values @@ -2791,7 +2792,7 @@
Displaying missing values y = colDef(na = "NA", format = colFormat(percent = TRUE)) ) )
+-Custom data formatting @@ -2884,7 +2885,7 @@
R render functionpaste0("$", format(value * 1000, big.mark = ",")) }) ))
+-JavaScript render function @@ -2974,7 +2975,7 @@
JavaScript render function } ")) ))
+-Embedding HTML widgets @@ -3060,7 +3061,7 @@
Embedding HTML widgets sparkline(data$weight[[index]]) }) ))
+