qimus/semantic-ui-grid

Extended grid for data present

Installation

npm i --save semantic-data-grid

Example: cd example/ && npm i && npm start. Enjoy!

Live demo

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