--- title: "advanced datatable · RUAL Documentation" description: "A pre-styled advanced table showing data using advanced tooling" canonical: https://docs.rual.nl/block-types/state%20ui/state_advanced_datatable language: en --- [Cluster](https://docs.rual.nl/cluster) [Blocks](https://docs.rual.nl/block-types) [Interfaces](https://docs.rual.nl/interfaces) [Blueprints](https://docs.rual.nl/blueprints) [Tutorials](https://docs.rual.nl/tutorials) [Home automation](https://docs.rual.nl/home-automation) [Examples](https://docs.rual.nl/examples) [Reference](https://docs.rual.nl/reference) [Architecture](https://docs.rual.nl/architecture) [Troubleshooting](https://docs.rual.nl/troubleshooting) Other # advanced datatable This block is part of the [`state ui`](https://docs.rual.nl/block-types/state%20ui) group and was last modified in core [`v13.0.6`](https://docs.rual.nl/core-versions/130006). ## Storage Selection Required This block relies on a storage to perform its storage releated actions. You must manually select the storage you want to use in your flow using the storage selector modal. To access the modal, click the white button on the block. A pre-styled advanced table showing data using advanced tooling - state key `value` The state to bind the datatable to. If it is updated, the component will re-render - columns required `fielddefinitions` Choose the columns you want to show - overwrite column titles `v13.0.8` `array` Overwrite the title of a specific column. - columns width `array` Choose the widths of the columns in percentage, expects array of numbers. e.g. `5` for `5%` in width. Default `100%` - columns sortable `fielddefinitions` Choose which columns can be sorted, by default we will not do any sortable fields - overwrite column sort field `v13.0.8` `array` Overwrite which field will be sorted on column sort. With this function it is possible to sort on non existing columns / fields that are made up by combining multiple different values or are returned by the row render. - columns filterable `v13.0.7` `fielddefinitions` Choose which columns can be filtered, by default we will not do any filterable fields - search fields `fielddefinitions` Fields that will be searched on in addition to the column fields - return fields `v13.0.8` `fielddefinitions` Fields that will be returned during the search. Should be set if the data sent to the frontend should be limited due to confidential fields. Default `*` - row actions `statedatatableconnection` Actions that are specific to the row like edit, detail, json, revision or inline edit - query `query` Query used as a base for the datatable - show top pagination `v14.0.1` `condition` Adds a pagination to the top of the table Default `false` - rows per page `number` Number of results per page in the table Default `30` - rows per page options `v13.0.8` `array` Options to show in the dropdown at the bottom right Default `10, 30, 50, 100` - filters `statedatatablefilter` Adds filtering to the datatable - Storage `storage` - class `uiclass` Assigns a CSS class to the element. • Hidden when unused - style `uistyle` Applies inline CSS style to the element • Hidden when unused - attributes `uiattributes` Adds custom attributes to the element. • Hidden when unused - state `state` Returns the element to the frontend state. - Map Row `execute_function` The function will be executed for each row and state pins can be returned to overwrite whats visible. - Row Component `iteratestate` The component will be executed for every row and replace the default values and columns. A `tr` should be returned. The available parameters are `columns`, `row` and `index`. - On change `v14.0.3` `execute_function` The function will be executed every time any of the search parameters changes. A typical wiring for [advanced datatable](https://docs.rual.nl/block-types/state%2520ui/state_advanced_datatable): [combine](https://docs.rual.nl/block-types/fields/fielddefinitions_multiple) feeds the `columns` pin; the function out pin wires to an [execute](https://docs.rual.nl/block-types/function%2520execution/function_custom_execute_from_trigger) block. [![Studio canvas example for the advanced datatable block: typical wiring for advanced datatable.](https://docs.rual.nl/canvas-examples/state_advanced_datatable.png)](https://docs.rual.nl/canvas-examples/state_advanced_datatable.png?v=3) ## Used in these guides These documentation pages use or explain this block: - [Build Your First CRUD App](https://docs.rual.nl/getting-started/first-crud-app) - [Block Quick Reference](https://docs.rual.nl/reference/block-quick-reference) - [Handle Iterations](https://docs.rual.nl/interfaces/iterations) ## Version history Introduced in [`v13.0.1`](https://docs.rual.nl/core-versions/130001). Last modified in [`v13.0.6`](https://docs.rual.nl/core-versions/130006). - [v14.0.3](https://docs.rual.nl/core-versions/140003): This block or one of its pins was updated in `v14.0.3`, click here to see the release notes. - [v14.0.1](https://docs.rual.nl/core-versions/140001): This block or one of its pins was updated in `v14.0.1`, click here to see the release notes. - [v13.0.8](https://docs.rual.nl/core-versions/130008): This block or one of its pins was updated in `v13.0.8`, click here to see the release notes. - [v13.0.7](https://docs.rual.nl/core-versions/130007): This block or one of its pins was updated in `v13.0.7`, click here to see the release notes. - [Back to `state ui`](https://docs.rual.nl/block-types/state%20ui): Return to the main group to view all sub-groups - [Back to `state elements`](https://docs.rual.nl/block-types/state%20ui?group=state%20elements): Return to the group to view all blocks within this group Was this page helpful? [Tell us what to improve](https://docs.rual.nl/support) · RUAL Docs is an integral component of the [RUAL ecosystem](https://rual.nl)