/** * @alias Options * @class Options * @description * * [Configuration options](@/guides/getting-started/configuration-options/configuration-options.md) let you heavily customize your Handsontable instance. For example, you can: * * - Enable and disable built-in features * - Enable and configure additional [plugins](@/api/plugins.md) * - Personalize Handsontable's look * - Adjust Handsontable's behavior * - Implement your own custom features * * ::: only-for javascript * * To apply [configuration options](@/guides/getting-started/configuration-options/configuration-options.md), pass them as * a second argument of the [Handsontable constructor](@/guides/getting-started/installation/installation.md#initialize-handsontable), * using the [object literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer): * * Read more on the [Configuration options](@/guides/getting-started/configuration-options/configuration-options.md) page. * * ```js * const container = document.getElementById('example'); * * const hot = new Handsontable(container, { * // configuration options, in the object literal notation * licenseKey: 'non-commercial-and-evaluation', * data: [ * ['A1', 'B1', 'C1', 'D1', 'E1'], * ['A2', 'B2', 'C2', 'D2', 'E2'], * ['A3', 'B3', 'C3', 'D3', 'E3'], * ['A4', 'B4', 'C4', 'D4', 'E4'], * ['A5', 'B5', 'C5', 'D5', 'E5'], * ], * width: 400, * height: 300, * colHeaders: true, * rowHeaders: true, * customBorders: true, * dropdownMenu: true, * multiColumnSorting: true, * filters: true, * manualRowMove: true, * }); * ``` * ::: * * ::: only-for react * * To apply configuration options, pass them as individual props * of the [`HotTable`](@/guides/getting-started/installation/installation.md#_4-use-the-hottable-component) * or [`HotColumn`](@/guides/columns/react-hot-column/react-hot-column.md) components. * * Read more on the [Configuration options](@/guides/getting-started/configuration-options/configuration-options.md) page. * * ```jsx * * ``` * ::: * * ::: only-for angular * ```ts * settings = { * data: [ * ["A1", "B1", "C1", "D1", "E1"], * ["A2", "B2", "C2", "D2", "E2"], * ["A3", "B3", "C3", "D3", "E3"], * ["A4", "B4", "C4", "D4", "E4"], * ["A5", "B5", "C5", "D5", "E5"], * ], * width: 400, * height: 300, * colHeaders: true, * rowHeaders: true, * customBorders: true, * dropdownMenu: true, * multiColumnSorting: true, * filters: true, * manualRowMove: true, * }; * ``` * * ```html * * ``` * ::: * * Depending on your needs, you can apply [configuration options](@/api/options.md) to different elements of your grid: * - [The entire grid](@/guides/getting-started/configuration-options/configuration-options.md#set-grid-options) * - [Individual columns](@/guides/getting-started/configuration-options/configuration-options.md#set-column-options) * - [Individual rows](@/guides/getting-started/configuration-options/configuration-options.md#set-row-options) * - [Individual cells](@/guides/getting-started/configuration-options/configuration-options.md#set-cell-options) * - [Individual grid elements, based on any logic you implement](@/guides/getting-started/configuration-options/configuration-options.md#implementing-custom-logic) * * Read more: * - [Configuration options](@/guides/getting-started/configuration-options/configuration-options.md) */ declare const _default: () => Record; export default _default;