1.0.40 • Published 4 years ago
semantic-data-grid v1.0.40
Installation
npm i --save semantic-data-grid
Example: cd example/ && npm i && npm start. Enjoy!
Hot it use
import {
Column,
Provider as DataProvider,
Action,
ExtTable,
setHistory
} from 'semantic-grid'
const history = createBrowserHistory({ basename: '' });
setHistory(history);
const provider = new DataProvider.ArrayDataProvider({ data: store.getItems() });
const columns = [
{
title: '#',
type: Column.SERIAL_COLUMN,
sortable: true
},
{
title: 'First Name',
field: 'first_name',
sortable: true
},
{
title: 'Last Name',
field: 'last_name',
sortable: true
},
{
title: 'E-mail',
field: 'email',
sortable: true,
},
{
title: 'Country',
field: 'country',
sortable: true
},
{
title: 'Actions',
type: Column.ACTION_COLUMN,
actions: [
{
component: Action.EditAction,
link: (row) => `/users/${row.id}`
},
{
component: Action.DeleteAction,
action: ({ id }) => {
store.deleteItem(id);
}
}
]
}
];
const filter = {
name: 'users_filter',
items: [
{
name: 'first_name',
type: 'text',
label: 'First Name'
},
{
name: 'last_name',
type: 'text',
label: 'Last Name'
},
{
name: 'email',
type: 'text',
label: 'Email'
},
{
name: 'country',
type: 'text',
label: 'Country'
}
]
};
class DemoGrid extends Component {
render() {
return (
<Grid>
<Grid.Row>
<Grid.Column width={1}></Grid.Column>
<Grid.Column width={14}>
<Header as={'h2'}>Semantic ui grid example</Header>
<Button floated='right' primary onClick={() => this.props.history.push('/users/new')}>Create</Button>
<ExtTable
filter={filter}
sortable={true}
header={'Sortable grid'}
provider={provider}
columns={columns}/>
</Grid.Column>
</Grid.Row>
</Grid>
)
}
}
ExtTable props
Prop | Type | Description |
---|---|---|
filter | Object | which include filter name and array of filter items |
provider | Function | Instance one of ApiDataProvider or ArrayDataProvider |
onPageChange | Function | Handler which will be call after each one page change |
columns | Array | Array of table columns |
header | String | Header of grid |
sortable | Bool | Columns of table can sortable |
isFetching | Bool | Indicate to show loader |
filterNamePrefix | String | Prefix for filter params in search of browser |
Column props
Prop | Type | Description |
---|---|---|
columnOptions | Object | Any props from Table.Cell Semantic ui |
component | React.Component | Custom component for render cell |
type | string | One of type which was registered with registerColumnTypes function |
value | any | |
field | string | Name of the field that value will be show |
Filter props
Prop | Type | Description |
---|---|---|
type | string | One of type which was registered with registerFilterTypes function |
component | React.Component | Custom component |
updateAfterChange | bool | After each change fetch data |
options | object | Props for Grid.Column |
Custom types
You can define custom types of columns and filters. For example:
import { registerColumnTypes } from 'semantic-grid'
import MyCustomSuperColumn from './super-column'
const SUPER_COLUMN = 'super_column';
registerColumnTypes({
[SUPER_COLUMN]: MyCustomSuperColumn
});
let columns = [
{
type: SUPER_COLUMN,
//.....
}
];
class MyComponent extends React.Component {
render() {
return (
<ExtTable columns={columns}
//some other props
/>
)
}
}
Screenshots
1.0.40
4 years ago
1.0.32
5 years ago
1.0.31
5 years ago
1.0.30
5 years ago
1.0.29
5 years ago
1.0.27
5 years ago
1.0.25
5 years ago
1.0.24
5 years ago
1.0.23
5 years ago
1.0.22
5 years ago
1.0.21
5 years ago
1.0.20
5 years ago
1.0.19
5 years ago
1.0.18
5 years ago
1.0.17
5 years ago
1.0.16
5 years ago
1.0.15
5 years ago
1.0.14
5 years ago
1.0.13
5 years ago
1.0.12
5 years ago
1.0.11
5 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago