BlueprintUI Grid
Accelerate your development with a flexible UI datagrid that works everywhere.
Installation
To use the datagrid install the following,
npm install @blueprintui/grid @blueprintui/themesOptional packages for layout and typography utilities are also available.
npm install @blueprintui/layout @blueprintui/typographyCSS
To use components the base theme CSS file must be loaded into the page. This can be done via a CSS import or HTML link.
@import '@blueprintui/themes/index.min.css';or
<link rel="stylesheet" href="@blueprintui/themes/index.min.css"> CDN
Blueprint UI Components can be used via CDNs for fast and easy prototyping.
<link rel="stylesheet" href="https://unpkg.com/@blueprintui/themes/index.min.css">
<link rel="stylesheet" href="https://unpkg.com/@@blueprintui/themes/dark/index.min.css">
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/grid/include/core.js/+esm';
</script>Using a Component
Once the theme CSS is loaded the grid can be imported via JavaScript imports.
import '@blueprintui/grid/include/core.js';
import '@blueprintui/grid/include/keynav.js';<body bp-theme="dark">
<bp-grid>
<bp-grid-header>
<bp-grid-column>Column</bp-grid-column>
<bp-grid-column>Column</bp-grid-column>
<bp-grid-column>Column</bp-grid-column>
<bp-grid-column>Column</bp-grid-column>
</bp-grid-header>
<bp-grid-row>
<bp-grid-cell>Cell</bp-grid-cell>
<bp-grid-cell>Cell</bp-grid-cell>
<bp-grid-cell>Cell</bp-grid-cell>
<bp-grid-cell>Cell</bp-grid-cell>
</bp-grid-row>
</bp-grid>
</body>