Readonly
ColumnDataSchemaModelReadOnlyFormat
To use the readonly
property in RevoGrid, you can set it either as a boolean value or as a function that returns a boolean value based on the provided ColumnDataSchemaModel
.
Using readonly
as a Boolean
If you want the entire column to be read-only, you can set the readonly
property to true
for that column.
const columns = [
{
prop: 'name',
name: 'Name',
readonly: true, // This column is read-only
},
{
prop: 'age',
name: 'Age',
},
]
const data = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
]
<revo-grid source={data} columns={columns}></revo-grid>
Using readonly
as a Function
If you want to conditionally set the readonly
property based on the column data, you can provide a function that returns a boolean value.
const columns = [
{
prop: 'name',
name: 'Name',
readonly: (params) => {
// Make the cell read-only if the name is 'John'
return params.model.name === 'John'
},
},
{
prop: 'age',
name: 'Age',
},
]
const data = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
]
<revo-grid source={data} columns={columns}></revo-grid>
In this example, the name
column will be read-only for rows where the name
is 'John'. For other rows, it will be editable.
Example with Both Approaches
Here is an example combining both approaches for different columns:
const columns = [
{
prop: 'name',
name: 'Name',
readonly: true, // Entire column is read-only
},
{
prop: 'age',
name: 'Age',
readonly: (params) => {
// Make the cell read-only if the age is greater than 28
return params.model.age > 28
},
},
]
const data = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
]
<revo-grid source={data} columns={columns}></revo-grid>
Complete Example in Context
Here’s how you might integrate this into a full RevoGrid component in a React application:
const App = () => {
const columns = [
{
prop: 'name',
name: 'Name',
readonly: true, // Entire column is read-only
},
{
prop: 'age',
name: 'Age',
readonly: (params) => {
// Make the cell read-only if the age is greater than 28
return params.model.age > 28
},
},
]
const data = [
{ name: 'John', age: 30 },
{ name: 'Jane', age: 25 },
]
<revo-grid source={data} columns={columns} />
}
export default App
This example demonstrates how to configure columns to be read-only either entirely or based on specific conditions using RevoGrid's readonly
property.