redux-ag-grid
v1.5.1
Published
a react component on top of ag-grid, to use redux
Downloads
32
Readme
A component using redux and ag-grid
Usage:
import {AgGridReact} from "ag-grid-react";
import {AgGridReact} from "ag-grid-react";
import {RestfulResource,ReduxAgGrid,setStore,GridReducer,GridFieldSchema} from "redux-ag-grid";
import "ag-grid-react/build/themes/Bootstrap" //or ".../Material"
const schema=[
{
key:"username",
type:"text",
label:"Username foo"
},{
key:"role",
type:"select",
label:"Role",
options:[
{
name:"Admin",
value:"0"
},{
name:"Guest",
value:"1"
}
]
}
];
function NoneReduxStyle(){
return <ReduxAgGrid data={[]} schema={schema}>
<AgGridReact />
</ReduxAgGrid>
}
import {createStore,Store} from "redux";
import {fromJS} from "immutable";
let store:Store = createStore((state,action)=>{
let res = state?state:fromJS({
people:[],
grid:{}
});
if(state && action && action.type==='jsAction'){
console.log("received action:\n",action);
}
return GridReducer(res,action);
},fromJS({people:[],grid:{}}));
let schema=[
{key:'name',label:"名字",type:"input"},
{key:'age',label:"年龄",type:'input',required:true},
{key:'gender',label:"性别",type:'select',options:[{name:"男",value:1},{name:"女",value:0}]},
{key:"birthDay",label:"生日",type:"date"}
] as GridFieldSchema[];
let actions = [{
call:(data)=>{
store.dispatch({
type:"jsAction",
data
} as any)
},
displayName:"jsAction",
isStatic:false,
useSelected:false,
},"httpAction"];
let UserResource = new RestfulResource({
url:"http://192.168.150.211:3000/api/people",
modelPath:['people'],
dispatch:store.dispatch.bind(store),
apiType:"Loopback",
actions:[{
key:"httpAction",
displayName:"httpAction",
method:"POST",
path:":id/customAction2",
enabled:(data:any)=>{
return data.gender == 1;
},
data:(data)=>{
return data;
}
}]
});
setStore(store);
function ReduxStyle(){
return <ReduxAgGrid resource={UserResource} schema={schema}>
<AgGridReact />
</ReduxAgGrid>
}
Please refer to the example and typescript definition file as a simple document.
You'll need to import u-icon font icon to make grid header icon appear.