
Security News
OpenGrep Restores Fingerprinting in JSON and SARIF Outputs
OpenGrep has restored fingerprint and metavariable support in JSON and SARIF outputs, making static analysis more effective for CI/CD security automation.
@operato/data-grist
Advanced tools
Data-Grist is a powerful web component for displaying and manipulating data. It can present data in Grid, List, or Card formats and provides various features such as data sorting, filtering, editing, and more.
npm install @operato/data-grist
<script type="module">
import '@operato/data-grist/ox-grist.js'
</script>
<ox-grist
.mode=${'GRID'}
.config=${gridConfig}
.fetchHandler=${fetchDataFunction}
></ox-grist>
Data-Grist supports three display modes:
// Set mode
gristElement.mode = 'GRID' // or 'LIST', 'CARD'
Data-Grist provides various configuration options.
const config = {
columns: [
{
type: 'string',
name: 'name',
header: 'Name',
record: {
editable: true
},
sortable: true,
width: 150
}
// More columns...
],
rows: {
appendable: true, // Allow adding new records
editable: true, // Allow editing records
selectable: {
// Record selection settings
multiple: true // Allow multiple selections
}
},
pagination: {
infinite: false, // Use paging instead of infinite scroll
page: 1, // Starting page
limit: 20 // Records per page
}
// Additional settings...
}
// String column
{
type: 'string',
name: 'firstName',
header: 'First Name'
}
// Number column
{
type: 'number',
name: 'age',
header: 'Age',
record: {
align: 'right'
}
}
// Boolean column
{
type: 'boolean',
name: 'isActive',
header: 'Active'
}
// Link column
{
type: 'link',
name: 'website',
header: 'Website',
record: {
options: {
href: (column, record) => record.url,
target: '_blank'
}
}
}
// Gutter column (row number, checkbox, button, etc.)
{
type: 'gutter',
gutterName: 'sequence' // 'row-selector', 'button', 'dirty', etc.
}
Data can be retrieved through the fetchHandler
function.
const fetchHandler = async params => {
const { page, limit, sorters, filters } = params
// Fetch data from server
const response = await fetch(`/api/data?page=${page}&limit=${limit}`)
const data = await response.json()
return {
total: data.total,
records: data.items
}
}
// Configure the grist
gristElement.fetchHandler = fetchHandler
// Add record at the end (default)
gristElement.addRecord({
name: 'John Doe',
age: 30
})
// Add record at the top
gristElement.addRecordToTop({
name: 'Jane Smith',
age: 25
})
// Get all selected records
const selectedRecords = gristElement.selected
// Set selection
gristElement.selected = [record1, record2]
// Select records using a selector function
gristElement.select(record => record.age > 30)
// Get modified records
const dirtyRecords = gristElement.dirtyRecords
// Check for changes
gristElement.checkDirties()
// Export changes as patches
const patches = gristElement.exportPatchList()
Data-Grist triggers various events.
// Record selection change event
gristElement.addEventListener('select-record-change', e => {
const { records, added, removed } = e.detail
console.log('Selected records:', records)
})
// Field change event
gristElement.addEventListener('field-change', e => {
const { after, before, column, record, row } = e.detail
console.log('Changed field:', column.name, 'from', before, 'to', after)
})
// Record change event
gristElement.addEventListener('record-change', e => {
const { before, after, column, row } = e.detail
console.log('Record changed:', row)
})
{
type: 'number',
name: 'amount',
header: 'Amount',
accumulator: 'sum' // 'avg', 'count', 'min', 'max' or custom function
}
const config = {
// ...
tree: {
childrenProperty: 'children', // Property name where child nodes are stored
expanded: true // Initial tree expansion state
}
}
const config = {
columns: [
// ...
{
type: 'string',
name: 'firstName',
header: 'First Name',
group: 'personalInfo'
},
{
type: 'string',
name: 'lastName',
header: 'Last Name',
group: 'personalInfo'
}
],
// ...
rows: {
// ...
groups: [
{
name: 'personalInfo',
title: 'Personal Information'
}
]
}
}
// Configure user settings provider
gristElement.personalConfigProvider = {
async load() {
// Load saved settings
return JSON.parse(localStorage.getItem('userGristConfig'))
},
async save(preference) {
// Save user settings
localStorage.setItem('userGristConfig', JSON.stringify(preference))
}
}
Data-Grist can be styled through CSS variables.
ox-grist {
--grid-header-background-color: #f5f5f5;
--grid-record-background-color: white;
--grid-record-odd-background-color: #f9f9f9;
--grid-header-color: #333;
--grid-record-hover-background-color: #e9e9e9;
}
Property | Type | Description |
---|---|---|
mode | string | Display mode ('GRID', 'LIST', 'CARD') |
config | object | Grist configuration object |
data | object | Data to display |
selectedRecords | array | Array of selected records |
explicitFetch | boolean | Enable explicit data fetching |
fetchHandler | function | Data fetching function |
fetchOptions | object | Data fetching options |
filters | array | Array of filters |
sorters | array | Array of sorters |
pagination | object | Pagination settings |
Method | Description |
---|---|
fetch(reset) | Fetch data |
addRecord(record) | Add a record |
addRecordToTop(record) | Add a record at the top |
deleteSelectedRecords(dirty) | Delete selected records |
cloneSelectedRecords() | Clone selected records |
checkDirties() | Check for modified records |
undo() | Undo last action |
redo() | Redo undone action |
reset() | Reset data |
commit() | Commit changes |
select(selector, reset) | Select records using a function |
exportPatchList(options) | Export list of change patches |
exportRecords(options) | Export record data |
<ox-grist
.mode=${'GRID'}
.config=${gridConfig}
.fetchHandler=${fetchData}
@record-change=${handleRecordChange}
></ox-grist>
<ox-grist
.mode=${'GRID'}
.config=${{
columns: [/* column definitions */],
rows: {
appendable: true,
editable: true,
selectable: { multiple: true }
}
}}
.data=${{ records: initialData }}
></ox-grist>
<button @click="${() => gristRef.addRecordToTop()}">Add Row to Top</button>
<ox-grist id="my-grist"></ox-grist>
<script>
const gristRef = document.getElementById('my-grist')
</script>
MIT
FAQs
User interface for grid (desktop) and list (mobile)
The npm package @operato/data-grist receives a total of 948 weekly downloads. As such, @operato/data-grist popularity was classified as not popular.
We found that @operato/data-grist demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenGrep has restored fingerprint and metavariable support in JSON and SARIF outputs, making static analysis more effective for CI/CD security automation.
Security News
Security experts warn that recent classification changes obscure the true scope of the NVD backlog as CVE volume hits all-time highs.
Security Fundamentals
Attackers use obfuscation to hide malware in open source packages. Learn how to spot these techniques across npm, PyPI, Maven, and more.