Nothing
tests/testthat/_snaps/reactable.md
In reactable: Interactive Data Tables for R
static rendering
Code
cat(rendered$html)
Output
<div class="reactable html-widget html-fill-item-overflow-hidden html-fill-item" data-react-ssr id="stable-id-static-rendering" style="width:auto;height:auto;"><div class="Reactable ReactTable"><div class="rt-table" role="table"><div class="rt-thead" role="rowgroup" style="min-width:300px"><div class="rt-tr rt-tr-header" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-th rt-align-right" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort x" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><span class="rt-sort-left" aria-hidden="true"></span><div class="rt-text-content">x</div></div></div></div><div class="rt-th rt-align-left" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort y" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">y</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div><div class="rt-th rt-align-left" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort z" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">z</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div></div></div><div class="rt-tbody" role="rowgroup" style="min-width:300px"><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">1</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">a</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">1,2,3</div></div></div></div><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">2</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">column-y-cell</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">4,5,6</div></div></div></div><div class="rt-no-data" aria-live="assertive"></div></div></div></div></div>
<script type="application/json" data-for="stable-id-static-rendering">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"x":[1,2],"y":["a","column-y-cell"],"z":[[1,2,3],[4,5,6]]},"columns":[{"id":"x","name":"x","type":"numeric"},{"id":"y","name":"y","type":"character"},{"id":"z","name":"z","type":"AsIs"}],"elementId":"stable-id-static-rendering","dataKey":"f09fcb11dd011a5cefcb1725322e0cb4"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
Code
cat(styleDep$head)
Output
<style data-emotion="reactable 1rdr7a4 1ub9dy9 d7nd0n">.reactable-1rdr7a4{color:blue;}.reactable-1ub9dy9{border-width:3px;}.reactable-d7nd0n{border-width:3px;}.rt-bordered .reactable-d7nd0n,.rt-outlined .reactable-d7nd0n{border-width:3px;}</style>
Code
cat(rendered$html)
Output
<div class="reactable html-widget html-fill-item-overflow-hidden html-fill-item" data-react-ssr id="stable-id-theme-critical-css" style="width:auto;height:auto;"><div class="Reactable ReactTable reactable-1rdr7a4"><div class="rt-table reactable-1ub9dy9" role="table"><div class="rt-thead" role="rowgroup" style="min-width:300px"><div class="rt-tr rt-tr-header" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-th rt-align-right reactable-d7nd0n" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort x" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><span class="rt-sort-left" aria-hidden="true"></span><div class="rt-text-content">x</div></div></div></div><div class="rt-th rt-align-left reactable-d7nd0n" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort y" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">y</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div><div class="rt-th rt-align-left reactable-d7nd0n" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort z" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">z</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div></div></div><div class="rt-tbody" role="rowgroup" style="min-width:300px"><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right reactable-1ub9dy9" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">1</div></div><div class="rt-td rt-align-left reactable-1ub9dy9" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">a</div></div><div class="rt-td rt-align-left reactable-1ub9dy9" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">1,2,3</div></div></div></div><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right reactable-1ub9dy9" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">2</div></div><div class="rt-td rt-align-left reactable-1ub9dy9" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">column-y-cell</div></div><div class="rt-td rt-align-left reactable-1ub9dy9" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">4,5,6</div></div></div></div><div class="rt-no-data" aria-live="assertive"></div></div></div></div></div>
<script type="application/json" data-for="stable-id-theme-critical-css">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"x":[1,2],"y":["a","column-y-cell"],"z":[[1,2,3],[4,5,6]]},"columns":[{"id":"x","name":"x","type":"numeric"},{"id":"y","name":"y","type":"character"},{"id":"z","name":"z","type":"AsIs"}],"theme":{"color":"blue","borderWidth":3},"elementId":"stable-id-theme-critical-css","dataKey":"f09fcb11dd011a5cefcb1725322e0cb4"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
Code
cat(rendered$html)
Output
<div class="reactable html-widget html-fill-item-overflow-hidden html-fill-item" data-react-ssr id="stable-id-custom-js-evals" style="width:auto;height:auto;"><div class="Reactable ReactTable"><div class="rt-table" role="table"><div class="rt-thead" role="rowgroup" style="min-width:300px"><div class="rt-tr rt-tr-header" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-th rt-align-right" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort x" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><span class="rt-sort-left" aria-hidden="true"></span><div class="rt-text-content">x</div></div></div></div><div class="rt-th rt-align-left" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort y" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">y</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div><div class="rt-th rt-align-left" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort z" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">z</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div></div></div><div class="rt-tbody" role="rowgroup" style="min-width:300px"><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">js-rendered_1_</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner"><b>a</b></div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">1,2,3</div></div></div></div><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">js-rendered_2_</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner"><b>column-y-cell</b></div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">4,5,6</div></div></div></div><div class="rt-no-data" aria-live="assertive"></div></div></div></div></div>
<script type="application/json" data-for="stable-id-custom-js-evals">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"x":[1,2],"y":["a","column-y-cell"],"z":[[1,2,3],[4,5,6]]},"columns":[{"id":"x","name":"x","type":"numeric","cell":"cellInfo => `js-rendered_${cellInfo.value}_`"},{"id":"y","name":"y","type":"character","cell":[{"name":"b","attribs":{},"children":["a"]},{"name":"b","attribs":{},"children":["column-y-cell"]}]},{"id":"z","name":"z","type":"AsIs"}],"elementId":"stable-id-custom-js-evals","dataKey":"bd88f9f4f4eb8f75073fc3a22a74c1cd"},"children":[]},"class":"reactR_markup"},"evals":["tag.attribs.columns.0.cell"],"jsHooks":[]}</script>
Code
cat(rendered$html)
Output
<div class="reactable html-widget html-fill-item-overflow-hidden html-fill-item" data-react-ssr id="stable-id-external-React" style="width:auto;height:auto;"><div class="Reactable ReactTable"><div class="rt-table" role="table"><div class="rt-thead" role="rowgroup" style="min-width:300px"><div class="rt-tr rt-tr-header" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-th rt-align-right" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort x" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><span class="rt-sort-left" aria-hidden="true"></span><div class="rt-text-content">x</div></div></div></div><div class="rt-th rt-align-left" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort y" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">y</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div><div class="rt-th rt-align-left" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort z" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">z</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div></div></div><div class="rt-tbody" role="rowgroup" style="min-width:300px"><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">1</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner"><b>a</b></div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">1,2,3</div></div></div></div><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">2</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner"><b>column-y-cell</b></div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">4,5,6</div></div></div></div><div class="rt-no-data" aria-live="assertive"></div></div></div></div></div>
<script type="application/json" data-for="stable-id-external-React">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"x":[1,2],"y":["a","column-y-cell"],"z":[[1,2,3],[4,5,6]]},"columns":[{"id":"x","name":"x","type":"numeric"},{"id":"y","name":"y","type":"character","cell":"cellInfo => React.createElement('b', null, cellInfo.value)"},{"id":"z","name":"z","type":"AsIs"}],"elementId":"stable-id-external-React","dataKey":"2f64b24b884b505b77491449ecc29b61"},"children":[]},"class":"reactR_markup"},"evals":["tag.attribs.columns.1.cell"],"jsHooks":[]}</script>
"<div class=\"reactable html-widget html-fill-item-overflow-hidden html-fill-item\" data-react-ssr id=\"stable-id-row-details\" style=\"width:auto;height:auto;\"><div class=\"Reactable ReactTable\"><div class=\"rt-table\" role=\"table\"><div class=\"rt-thead\" role=\"rowgroup\" style=\"min-width:145px\"><div class=\"rt-tr rt-tr-header\" role=\"row\" style=\"flex:1 0 auto;min-width:145px\"><div class=\"rt-th rt-align-center\" role=\"columnheader\" style=\"position:relative;flex:0 0 auto;min-width:45px;width:45px;max-width:45px\"><div class=\"rt-th-inner\"><\/div><\/div><div class=\"rt-th rt-align-right\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort x\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><span class=\"rt-sort-left\" aria-hidden=\"true\"><\/span><div class=\"rt-text-content\">x<\/div><\/div><\/div><\/div><\/div><\/div><div class=\"rt-tbody\" role=\"rowgroup\" style=\"min-width:145px\"><div class=\"rt-tr-group\"><div class=\"rt-tr\" role=\"row\" style=\"flex:1 0 auto;min-width:145px\"><div class=\"rt-td rt-align-center rt-td-expandable\" role=\"cell\" style=\"flex:0 0 auto;min-width:45px;width:45px;max-width:45px;text-overflow:clip;user-select:none\"><div class=\"rt-td-inner\"><button class=\"rt-expander-button\" aria-label=\"Toggle details\" aria-expanded=\"false\"><span class=\"rt-expander\" tabindex=\"-1\" aria-hidden=\"true\"><\/span><\/button><\/div><\/div><div class=\"rt-td rt-align-right\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">1<\/div><\/div><\/div><\/div><div class=\"rt-no-data\" aria-live=\"assertive\"><\/div><\/div><\/div><\/div><\/div>\n<script type=\"application/json\" data-for=\"stable-id-row-details\">{\"x\":{\"tag\":{\"name\":\"Reactable\",\"attribs\":{\"data\":{\"x\":[1]},\"columns\":[{\"id\":\".details\",\"name\":\"\",\"type\":null,\"sortable\":false,\"resizable\":false,\"filterable\":false,\"searchable\":false,\"width\":45,\"align\":\"center\",\"details\":[\"row-details\"]},{\"id\":\"x\",\"name\":\"x\",\"type\":\"numeric\"}],\"elementId\":\"stable-id-row-details\",\"dataKey\":\"cdcc049b22a5052f3797eb020abf2b4c\"},\"children\":[]},\"class\":\"reactR_markup\"},\"evals\":[],\"jsHooks\":[]}<\/script>"
Code
cat(rendered$html)
Output
<div class="reactable html-widget html-fill-item-overflow-hidden html-fill-item" data-react-ssr id="stable-id-html-widgets" style="width:auto;height:auto;"><div class="Reactable ReactTable"><div class="rt-table" role="table"><div class="rt-thead" role="rowgroup" style="min-width:100px"><div class="rt-tr rt-tr-header" role="row" style="flex:1 0 auto;min-width:100px"><div class="rt-th rt-align-right" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort x" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><span class="rt-sort-left" aria-hidden="true"></span><div class="rt-text-content">x</div></div></div></div></div></div><div class="rt-tbody" role="rowgroup" style="min-width:100px"><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:100px"><div class="rt-td rt-align-right" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner"></div></div></div></div><div class="rt-no-data" aria-live="assertive"></div></div></div></div></div>
<script type="application/json" data-for="stable-id-html-widgets">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"x":[1]},"columns":[{"id":"x","name":"x","type":"numeric","cell":[{"name":"WidgetContainer","attribs":{"key":"e064ce22a125c7dc2d723f7491898939"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"stable-id-sparkline","className":"sparkline html-widget "},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"stable-id-sparkline"},"children":["{\"x\":{\"values\":[1,2],\"options\":{\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]}]}],"elementId":"stable-id-html-widgets","dataKey":"f7d43b158943d129cc0ccd5b599b92e5"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
"<div class=\"reactable html-widget html-fill-item-overflow-hidden html-fill-item\" data-react-ssr id=\"stable-id-formatting-intl-polyfills\" style=\"width:auto;height:auto;\"><div class=\"Reactable ReactTable\"><div class=\"rt-table\" role=\"table\"><div class=\"rt-thead\" role=\"rowgroup\" style=\"min-width:900px\"><div class=\"rt-tr rt-tr-header\" role=\"row\" style=\"flex:1 0 auto;min-width:900px\"><div class=\"rt-th rt-align-left\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort str\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><div class=\"rt-text-content\">str<\/div><span class=\"rt-sort-right\" aria-hidden=\"true\"><\/span><\/div><\/div><\/div><div class=\"rt-th rt-align-right\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort pct\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><span class=\"rt-sort-left\" aria-hidden=\"true\"><\/span><div class=\"rt-text-content\">pct<\/div><\/div><\/div><\/div><div class=\"rt-th rt-align-right\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort pct_digits\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><span class=\"rt-sort-left\" aria-hidden=\"true\"><\/span><div class=\"rt-text-content\">pct_digits<\/div><\/div><\/div><\/div><div class=\"rt-th rt-align-right\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort currency_USD\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><span class=\"rt-sort-left\" aria-hidden=\"true\"><\/span><div class=\"rt-text-content\">currency_USD<\/div><\/div><\/div><\/div><div class=\"rt-th rt-align-right\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort currency_EUR\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><span class=\"rt-sort-left\" aria-hidden=\"true\"><\/span><div class=\"rt-text-content\">currency_EUR<\/div><\/div><\/div><\/div><div class=\"rt-th rt-align-left\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort date\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><div class=\"rt-text-content\">date<\/div><span class=\"rt-sort-right\" aria-hidden=\"true\"><\/span><\/div><\/div><\/div><div class=\"rt-th rt-align-left\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort time\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><div class=\"rt-text-content\">time<\/div><span class=\"rt-sort-right\" aria-hidden=\"true\"><\/span><\/div><\/div><\/div><div class=\"rt-th rt-align-right\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort num\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><span class=\"rt-sort-left\" aria-hidden=\"true\"><\/span><div class=\"rt-text-content\">num<\/div><\/div><\/div><\/div><div class=\"rt-th rt-align-right\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort locale_hi_IN\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><span class=\"rt-sort-left\" aria-hidden=\"true\"><\/span><div class=\"rt-text-content\">locale_hi_IN<\/div><\/div><\/div><\/div><\/div><\/div><div class=\"rt-tbody\" role=\"rowgroup\" style=\"min-width:900px\"><div class=\"rt-tr-group\"><div class=\"rt-tr\" role=\"row\" style=\"flex:1 0 auto;min-width:900px\"><div class=\"rt-td rt-align-left\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">pre_str_suffix<\/div><\/div><div class=\"rt-td rt-align-right\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">75%<\/div><\/div><div class=\"rt-td rt-align-right\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">52.9%<\/div><\/div><div class=\"rt-td rt-align-right\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">$10.00<\/div><\/div><div class=\"rt-td rt-align-right\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">€11.12<\/div><\/div><div class=\"rt-td rt-align-left\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">_date_replaced_date_<\/div><\/div><div class=\"rt-td rt-align-left\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">_time_replaced_time_<\/div><\/div><div class=\"rt-td rt-align-right\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">1,234.1<\/div><\/div><div class=\"rt-td rt-align-right\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">₹1,234,567.40<\/div><\/div><\/div><\/div><div class=\"rt-no-data\" aria-live=\"assertive\"><\/div><\/div><\/div><\/div><\/div>\n<script type=\"application/json\" data-for=\"stable-id-formatting-intl-polyfills\">{\"x\":{\"tag\":{\"name\":\"Reactable\",\"attribs\":{\"data\":{\"str\":[\"str\"],\"pct\":[0.75],\"pct_digits\":[0.529],\"currency_USD\":[10],\"currency_EUR\":[11.123],\"date\":[\"2019-05-06T03:22:15Z\"],\"time\":[\"2019-05-06T03:22:15Z\"],\"num\":[1234.1234],\"locale_hi_IN\":[1234567.4]},\"columns\":[{\"id\":\"str\",\"name\":\"str\",\"type\":\"character\",\"format\":{\"cell\":{\"prefix\":\"pre_\",\"suffix\":\"_suffix\"},\"aggregated\":{\"prefix\":\"pre_\",\"suffix\":\"_suffix\"}}},{\"id\":\"pct\",\"name\":\"pct\",\"type\":\"numeric\",\"format\":{\"cell\":{\"percent\":true},\"aggregated\":{\"percent\":true}}},{\"id\":\"pct_digits\",\"name\":\"pct_digits\",\"type\":\"numeric\",\"format\":{\"cell\":{\"percent\":true},\"aggregated\":{\"percent\":true}}},{\"id\":\"currency_USD\",\"name\":\"currency_USD\",\"type\":\"numeric\",\"format\":{\"cell\":{\"currency\":\"USD\"},\"aggregated\":{\"currency\":\"USD\"}}},{\"id\":\"currency_EUR\",\"name\":\"currency_EUR\",\"type\":\"numeric\",\"format\":{\"cell\":{\"currency\":\"EUR\"},\"aggregated\":{\"currency\":\"EUR\"}}},{\"id\":\"date\",\"name\":\"date\",\"type\":\"Date\",\"format\":{\"cell\":{\"prefix\":\"_date_\",\"suffix\":\"_date_\",\"datetime\":true},\"aggregated\":{\"prefix\":\"_date_\",\"suffix\":\"_date_\",\"datetime\":true}}},{\"id\":\"time\",\"name\":\"time\",\"type\":\"Date\",\"format\":{\"cell\":{\"prefix\":\"_time_\",\"suffix\":\"_time_\",\"time\":true},\"aggregated\":{\"prefix\":\"_time_\",\"suffix\":\"_time_\",\"time\":true}}},{\"id\":\"num\",\"name\":\"num\",\"type\":\"numeric\",\"format\":{\"cell\":{\"digits\":1,\"separators\":true},\"aggregated\":{\"digits\":1,\"separators\":true}}},{\"id\":\"locale_hi_IN\",\"name\":\"locale_hi_IN\",\"type\":\"numeric\",\"format\":{\"cell\":{\"separators\":true,\"currency\":\"INR\",\"locales\":\"hi-IN\"},\"aggregated\":{\"separators\":true,\"currency\":\"INR\",\"locales\":\"hi-IN\"}}}],\"elementId\":\"stable-id-formatting-intl-polyfills\",\"dataKey\":\"0519a440a28d31e079942abf20805ab1\"},\"children\":[]},\"class\":\"reactR_markup\"},\"evals\":[],\"jsHooks\":[]}<\/script>"
Code
cat(rendered$html)
Output
<div class="reactable html-widget html-fill-item-overflow-hidden html-fill-item" id="stable-id-CSR-fallback" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="stable-id-CSR-fallback">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"x":[1,2],"y":["a","column-y-cell"],"z":[[1,2,3],[4,5,6]]},"columns":[{"id":"x","name":"x","type":"numeric","cell":"throw new Error('error rendering JS')"},{"id":"y","name":"y","type":"character"},{"id":"z","name":"z","type":"AsIs"}],"elementId":"stable-id-CSR-fallback","dataKey":"65bcb4103c068cbb97c7ef2f3a491dd2"},"children":[]},"class":"reactR_markup"},"evals":["tag.attribs.columns.0.cell"],"jsHooks":[]}</script>
Try the reactable package in your browser
Any scripts or data that you put into this service are public.
reactable documentation built on March 31, 2023, 11:39 p.m.
R Package Documentation
Browse R Packages
We want your feedback!
Note that we can't provide technical support on individual packages. You should contact the package authors for that.
static rendering
Code
cat(rendered$html)
Output
<div class="reactable html-widget html-fill-item-overflow-hidden html-fill-item" data-react-ssr id="stable-id-static-rendering" style="width:auto;height:auto;"><div class="Reactable ReactTable"><div class="rt-table" role="table"><div class="rt-thead" role="rowgroup" style="min-width:300px"><div class="rt-tr rt-tr-header" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-th rt-align-right" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort x" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><span class="rt-sort-left" aria-hidden="true"></span><div class="rt-text-content">x</div></div></div></div><div class="rt-th rt-align-left" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort y" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">y</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div><div class="rt-th rt-align-left" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort z" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">z</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div></div></div><div class="rt-tbody" role="rowgroup" style="min-width:300px"><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">1</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">a</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">1,2,3</div></div></div></div><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">2</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">column-y-cell</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">4,5,6</div></div></div></div><div class="rt-no-data" aria-live="assertive"></div></div></div></div></div>
<script type="application/json" data-for="stable-id-static-rendering">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"x":[1,2],"y":["a","column-y-cell"],"z":[[1,2,3],[4,5,6]]},"columns":[{"id":"x","name":"x","type":"numeric"},{"id":"y","name":"y","type":"character"},{"id":"z","name":"z","type":"AsIs"}],"elementId":"stable-id-static-rendering","dataKey":"f09fcb11dd011a5cefcb1725322e0cb4"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
Code
cat(styleDep$head)
Output
<style data-emotion="reactable 1rdr7a4 1ub9dy9 d7nd0n">.reactable-1rdr7a4{color:blue;}.reactable-1ub9dy9{border-width:3px;}.reactable-d7nd0n{border-width:3px;}.rt-bordered .reactable-d7nd0n,.rt-outlined .reactable-d7nd0n{border-width:3px;}</style>
Code
cat(rendered$html)
Output
<div class="reactable html-widget html-fill-item-overflow-hidden html-fill-item" data-react-ssr id="stable-id-theme-critical-css" style="width:auto;height:auto;"><div class="Reactable ReactTable reactable-1rdr7a4"><div class="rt-table reactable-1ub9dy9" role="table"><div class="rt-thead" role="rowgroup" style="min-width:300px"><div class="rt-tr rt-tr-header" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-th rt-align-right reactable-d7nd0n" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort x" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><span class="rt-sort-left" aria-hidden="true"></span><div class="rt-text-content">x</div></div></div></div><div class="rt-th rt-align-left reactable-d7nd0n" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort y" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">y</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div><div class="rt-th rt-align-left reactable-d7nd0n" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort z" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">z</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div></div></div><div class="rt-tbody" role="rowgroup" style="min-width:300px"><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right reactable-1ub9dy9" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">1</div></div><div class="rt-td rt-align-left reactable-1ub9dy9" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">a</div></div><div class="rt-td rt-align-left reactable-1ub9dy9" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">1,2,3</div></div></div></div><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right reactable-1ub9dy9" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">2</div></div><div class="rt-td rt-align-left reactable-1ub9dy9" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">column-y-cell</div></div><div class="rt-td rt-align-left reactable-1ub9dy9" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">4,5,6</div></div></div></div><div class="rt-no-data" aria-live="assertive"></div></div></div></div></div>
<script type="application/json" data-for="stable-id-theme-critical-css">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"x":[1,2],"y":["a","column-y-cell"],"z":[[1,2,3],[4,5,6]]},"columns":[{"id":"x","name":"x","type":"numeric"},{"id":"y","name":"y","type":"character"},{"id":"z","name":"z","type":"AsIs"}],"theme":{"color":"blue","borderWidth":3},"elementId":"stable-id-theme-critical-css","dataKey":"f09fcb11dd011a5cefcb1725322e0cb4"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
Code
cat(rendered$html)
Output
<div class="reactable html-widget html-fill-item-overflow-hidden html-fill-item" data-react-ssr id="stable-id-custom-js-evals" style="width:auto;height:auto;"><div class="Reactable ReactTable"><div class="rt-table" role="table"><div class="rt-thead" role="rowgroup" style="min-width:300px"><div class="rt-tr rt-tr-header" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-th rt-align-right" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort x" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><span class="rt-sort-left" aria-hidden="true"></span><div class="rt-text-content">x</div></div></div></div><div class="rt-th rt-align-left" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort y" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">y</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div><div class="rt-th rt-align-left" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort z" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">z</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div></div></div><div class="rt-tbody" role="rowgroup" style="min-width:300px"><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">js-rendered_1_</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner"><b>a</b></div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">1,2,3</div></div></div></div><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">js-rendered_2_</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner"><b>column-y-cell</b></div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">4,5,6</div></div></div></div><div class="rt-no-data" aria-live="assertive"></div></div></div></div></div>
<script type="application/json" data-for="stable-id-custom-js-evals">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"x":[1,2],"y":["a","column-y-cell"],"z":[[1,2,3],[4,5,6]]},"columns":[{"id":"x","name":"x","type":"numeric","cell":"cellInfo => `js-rendered_${cellInfo.value}_`"},{"id":"y","name":"y","type":"character","cell":[{"name":"b","attribs":{},"children":["a"]},{"name":"b","attribs":{},"children":["column-y-cell"]}]},{"id":"z","name":"z","type":"AsIs"}],"elementId":"stable-id-custom-js-evals","dataKey":"bd88f9f4f4eb8f75073fc3a22a74c1cd"},"children":[]},"class":"reactR_markup"},"evals":["tag.attribs.columns.0.cell"],"jsHooks":[]}</script>
Code
cat(rendered$html)
Output
<div class="reactable html-widget html-fill-item-overflow-hidden html-fill-item" data-react-ssr id="stable-id-external-React" style="width:auto;height:auto;"><div class="Reactable ReactTable"><div class="rt-table" role="table"><div class="rt-thead" role="rowgroup" style="min-width:300px"><div class="rt-tr rt-tr-header" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-th rt-align-right" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort x" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><span class="rt-sort-left" aria-hidden="true"></span><div class="rt-text-content">x</div></div></div></div><div class="rt-th rt-align-left" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort y" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">y</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div><div class="rt-th rt-align-left" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort z" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><div class="rt-text-content">z</div><span class="rt-sort-right" aria-hidden="true"></span></div></div></div></div></div><div class="rt-tbody" role="rowgroup" style="min-width:300px"><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">1</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner"><b>a</b></div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">1,2,3</div></div></div></div><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:300px"><div class="rt-td rt-align-right" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">2</div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner"><b>column-y-cell</b></div></div><div class="rt-td rt-align-left" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner">4,5,6</div></div></div></div><div class="rt-no-data" aria-live="assertive"></div></div></div></div></div>
<script type="application/json" data-for="stable-id-external-React">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"x":[1,2],"y":["a","column-y-cell"],"z":[[1,2,3],[4,5,6]]},"columns":[{"id":"x","name":"x","type":"numeric"},{"id":"y","name":"y","type":"character","cell":"cellInfo => React.createElement('b', null, cellInfo.value)"},{"id":"z","name":"z","type":"AsIs"}],"elementId":"stable-id-external-React","dataKey":"2f64b24b884b505b77491449ecc29b61"},"children":[]},"class":"reactR_markup"},"evals":["tag.attribs.columns.1.cell"],"jsHooks":[]}</script>
"<div class=\"reactable html-widget html-fill-item-overflow-hidden html-fill-item\" data-react-ssr id=\"stable-id-row-details\" style=\"width:auto;height:auto;\"><div class=\"Reactable ReactTable\"><div class=\"rt-table\" role=\"table\"><div class=\"rt-thead\" role=\"rowgroup\" style=\"min-width:145px\"><div class=\"rt-tr rt-tr-header\" role=\"row\" style=\"flex:1 0 auto;min-width:145px\"><div class=\"rt-th rt-align-center\" role=\"columnheader\" style=\"position:relative;flex:0 0 auto;min-width:45px;width:45px;max-width:45px\"><div class=\"rt-th-inner\"><\/div><\/div><div class=\"rt-th rt-align-right\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort x\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><span class=\"rt-sort-left\" aria-hidden=\"true\"><\/span><div class=\"rt-text-content\">x<\/div><\/div><\/div><\/div><\/div><\/div><div class=\"rt-tbody\" role=\"rowgroup\" style=\"min-width:145px\"><div class=\"rt-tr-group\"><div class=\"rt-tr\" role=\"row\" style=\"flex:1 0 auto;min-width:145px\"><div class=\"rt-td rt-align-center rt-td-expandable\" role=\"cell\" style=\"flex:0 0 auto;min-width:45px;width:45px;max-width:45px;text-overflow:clip;user-select:none\"><div class=\"rt-td-inner\"><button class=\"rt-expander-button\" aria-label=\"Toggle details\" aria-expanded=\"false\"><span class=\"rt-expander\" tabindex=\"-1\" aria-hidden=\"true\"><\/span><\/button><\/div><\/div><div class=\"rt-td rt-align-right\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">1<\/div><\/div><\/div><\/div><div class=\"rt-no-data\" aria-live=\"assertive\"><\/div><\/div><\/div><\/div><\/div>\n<script type=\"application/json\" data-for=\"stable-id-row-details\">{\"x\":{\"tag\":{\"name\":\"Reactable\",\"attribs\":{\"data\":{\"x\":[1]},\"columns\":[{\"id\":\".details\",\"name\":\"\",\"type\":null,\"sortable\":false,\"resizable\":false,\"filterable\":false,\"searchable\":false,\"width\":45,\"align\":\"center\",\"details\":[\"row-details\"]},{\"id\":\"x\",\"name\":\"x\",\"type\":\"numeric\"}],\"elementId\":\"stable-id-row-details\",\"dataKey\":\"cdcc049b22a5052f3797eb020abf2b4c\"},\"children\":[]},\"class\":\"reactR_markup\"},\"evals\":[],\"jsHooks\":[]}<\/script>"
Code
cat(rendered$html)
Output
<div class="reactable html-widget html-fill-item-overflow-hidden html-fill-item" data-react-ssr id="stable-id-html-widgets" style="width:auto;height:auto;"><div class="Reactable ReactTable"><div class="rt-table" role="table"><div class="rt-thead" role="rowgroup" style="min-width:100px"><div class="rt-tr rt-tr-header" role="row" style="flex:1 0 auto;min-width:100px"><div class="rt-th rt-align-right" role="columnheader" style="position:relative;flex:100 0 auto;min-width:100px;width:100px" aria-label="Sort x" aria-sort="none" tabindex="0" data-sort-hint="ascending"><div class="rt-th-inner"><div class="rt-sort-header"><span class="rt-sort-left" aria-hidden="true"></span><div class="rt-text-content">x</div></div></div></div></div></div><div class="rt-tbody" role="rowgroup" style="min-width:100px"><div class="rt-tr-group"><div class="rt-tr" role="row" style="flex:1 0 auto;min-width:100px"><div class="rt-td rt-align-right" role="cell" style="flex:100 0 auto;min-width:100px;width:100px"><div class="rt-td-inner"></div></div></div></div><div class="rt-no-data" aria-live="assertive"></div></div></div></div></div>
<script type="application/json" data-for="stable-id-html-widgets">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"x":[1]},"columns":[{"id":"x","name":"x","type":"numeric","cell":[{"name":"WidgetContainer","attribs":{"key":"e064ce22a125c7dc2d723f7491898939"},"children":[{"name":"Fragment","attribs":[],"children":[{"name":"span","attribs":{"id":"stable-id-sparkline","className":"sparkline html-widget "},"children":[]},{"name":"script","attribs":{"type":"application/json","data-for":"stable-id-sparkline"},"children":["{\"x\":{\"values\":[1,2],\"options\":{\"height\":20,\"width\":60},\"width\":60,\"height\":20},\"evals\":[],\"jsHooks\":[]}"]}]}]}]}],"elementId":"stable-id-html-widgets","dataKey":"f7d43b158943d129cc0ccd5b599b92e5"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
"<div class=\"reactable html-widget html-fill-item-overflow-hidden html-fill-item\" data-react-ssr id=\"stable-id-formatting-intl-polyfills\" style=\"width:auto;height:auto;\"><div class=\"Reactable ReactTable\"><div class=\"rt-table\" role=\"table\"><div class=\"rt-thead\" role=\"rowgroup\" style=\"min-width:900px\"><div class=\"rt-tr rt-tr-header\" role=\"row\" style=\"flex:1 0 auto;min-width:900px\"><div class=\"rt-th rt-align-left\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort str\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><div class=\"rt-text-content\">str<\/div><span class=\"rt-sort-right\" aria-hidden=\"true\"><\/span><\/div><\/div><\/div><div class=\"rt-th rt-align-right\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort pct\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><span class=\"rt-sort-left\" aria-hidden=\"true\"><\/span><div class=\"rt-text-content\">pct<\/div><\/div><\/div><\/div><div class=\"rt-th rt-align-right\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort pct_digits\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><span class=\"rt-sort-left\" aria-hidden=\"true\"><\/span><div class=\"rt-text-content\">pct_digits<\/div><\/div><\/div><\/div><div class=\"rt-th rt-align-right\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort currency_USD\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><span class=\"rt-sort-left\" aria-hidden=\"true\"><\/span><div class=\"rt-text-content\">currency_USD<\/div><\/div><\/div><\/div><div class=\"rt-th rt-align-right\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort currency_EUR\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><span class=\"rt-sort-left\" aria-hidden=\"true\"><\/span><div class=\"rt-text-content\">currency_EUR<\/div><\/div><\/div><\/div><div class=\"rt-th rt-align-left\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort date\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><div class=\"rt-text-content\">date<\/div><span class=\"rt-sort-right\" aria-hidden=\"true\"><\/span><\/div><\/div><\/div><div class=\"rt-th rt-align-left\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort time\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><div class=\"rt-text-content\">time<\/div><span class=\"rt-sort-right\" aria-hidden=\"true\"><\/span><\/div><\/div><\/div><div class=\"rt-th rt-align-right\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort num\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><span class=\"rt-sort-left\" aria-hidden=\"true\"><\/span><div class=\"rt-text-content\">num<\/div><\/div><\/div><\/div><div class=\"rt-th rt-align-right\" role=\"columnheader\" style=\"position:relative;flex:100 0 auto;min-width:100px;width:100px\" aria-label=\"Sort locale_hi_IN\" aria-sort=\"none\" tabindex=\"0\" data-sort-hint=\"ascending\"><div class=\"rt-th-inner\"><div class=\"rt-sort-header\"><span class=\"rt-sort-left\" aria-hidden=\"true\"><\/span><div class=\"rt-text-content\">locale_hi_IN<\/div><\/div><\/div><\/div><\/div><\/div><div class=\"rt-tbody\" role=\"rowgroup\" style=\"min-width:900px\"><div class=\"rt-tr-group\"><div class=\"rt-tr\" role=\"row\" style=\"flex:1 0 auto;min-width:900px\"><div class=\"rt-td rt-align-left\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">pre_str_suffix<\/div><\/div><div class=\"rt-td rt-align-right\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">75%<\/div><\/div><div class=\"rt-td rt-align-right\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">52.9%<\/div><\/div><div class=\"rt-td rt-align-right\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">$10.00<\/div><\/div><div class=\"rt-td rt-align-right\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">€11.12<\/div><\/div><div class=\"rt-td rt-align-left\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">_date_replaced_date_<\/div><\/div><div class=\"rt-td rt-align-left\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">_time_replaced_time_<\/div><\/div><div class=\"rt-td rt-align-right\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">1,234.1<\/div><\/div><div class=\"rt-td rt-align-right\" role=\"cell\" style=\"flex:100 0 auto;min-width:100px;width:100px\"><div class=\"rt-td-inner\">₹1,234,567.40<\/div><\/div><\/div><\/div><div class=\"rt-no-data\" aria-live=\"assertive\"><\/div><\/div><\/div><\/div><\/div>\n<script type=\"application/json\" data-for=\"stable-id-formatting-intl-polyfills\">{\"x\":{\"tag\":{\"name\":\"Reactable\",\"attribs\":{\"data\":{\"str\":[\"str\"],\"pct\":[0.75],\"pct_digits\":[0.529],\"currency_USD\":[10],\"currency_EUR\":[11.123],\"date\":[\"2019-05-06T03:22:15Z\"],\"time\":[\"2019-05-06T03:22:15Z\"],\"num\":[1234.1234],\"locale_hi_IN\":[1234567.4]},\"columns\":[{\"id\":\"str\",\"name\":\"str\",\"type\":\"character\",\"format\":{\"cell\":{\"prefix\":\"pre_\",\"suffix\":\"_suffix\"},\"aggregated\":{\"prefix\":\"pre_\",\"suffix\":\"_suffix\"}}},{\"id\":\"pct\",\"name\":\"pct\",\"type\":\"numeric\",\"format\":{\"cell\":{\"percent\":true},\"aggregated\":{\"percent\":true}}},{\"id\":\"pct_digits\",\"name\":\"pct_digits\",\"type\":\"numeric\",\"format\":{\"cell\":{\"percent\":true},\"aggregated\":{\"percent\":true}}},{\"id\":\"currency_USD\",\"name\":\"currency_USD\",\"type\":\"numeric\",\"format\":{\"cell\":{\"currency\":\"USD\"},\"aggregated\":{\"currency\":\"USD\"}}},{\"id\":\"currency_EUR\",\"name\":\"currency_EUR\",\"type\":\"numeric\",\"format\":{\"cell\":{\"currency\":\"EUR\"},\"aggregated\":{\"currency\":\"EUR\"}}},{\"id\":\"date\",\"name\":\"date\",\"type\":\"Date\",\"format\":{\"cell\":{\"prefix\":\"_date_\",\"suffix\":\"_date_\",\"datetime\":true},\"aggregated\":{\"prefix\":\"_date_\",\"suffix\":\"_date_\",\"datetime\":true}}},{\"id\":\"time\",\"name\":\"time\",\"type\":\"Date\",\"format\":{\"cell\":{\"prefix\":\"_time_\",\"suffix\":\"_time_\",\"time\":true},\"aggregated\":{\"prefix\":\"_time_\",\"suffix\":\"_time_\",\"time\":true}}},{\"id\":\"num\",\"name\":\"num\",\"type\":\"numeric\",\"format\":{\"cell\":{\"digits\":1,\"separators\":true},\"aggregated\":{\"digits\":1,\"separators\":true}}},{\"id\":\"locale_hi_IN\",\"name\":\"locale_hi_IN\",\"type\":\"numeric\",\"format\":{\"cell\":{\"separators\":true,\"currency\":\"INR\",\"locales\":\"hi-IN\"},\"aggregated\":{\"separators\":true,\"currency\":\"INR\",\"locales\":\"hi-IN\"}}}],\"elementId\":\"stable-id-formatting-intl-polyfills\",\"dataKey\":\"0519a440a28d31e079942abf20805ab1\"},\"children\":[]},\"class\":\"reactR_markup\"},\"evals\":[],\"jsHooks\":[]}<\/script>"
Code
cat(rendered$html)
Output
<div class="reactable html-widget html-fill-item-overflow-hidden html-fill-item" id="stable-id-CSR-fallback" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="stable-id-CSR-fallback">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"x":[1,2],"y":["a","column-y-cell"],"z":[[1,2,3],[4,5,6]]},"columns":[{"id":"x","name":"x","type":"numeric","cell":"throw new Error('error rendering JS')"},{"id":"y","name":"y","type":"character"},{"id":"z","name":"z","type":"AsIs"}],"elementId":"stable-id-CSR-fallback","dataKey":"65bcb4103c068cbb97c7ef2f3a491dd2"},"children":[]},"class":"reactR_markup"},"evals":["tag.attribs.columns.0.cell"],"jsHooks":[]}</script>
Try the reactable package in your browser
Any scripts or data that you put into this service are public.
R Package Documentation
Browse R Packages
We want your feedback!
Note that we can't provide technical support on individual packages. You should contact the package authors for that.
Embedding an R snippet on your website
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.