• Stars
    star
    160
  • Rank 234,703 (Top 5 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created over 8 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

ReactJS / Redux Data Table

Sematable

No Maintenance Intended

⛔️ DEPRECATED This repository isn't mantained by Sematext any more.

Sematable wraps a table component, and provides:

  • filtering by column value
  • search with text
  • sorting
  • row selection
  • pagination

... with the ability to persist the table state in application state with Redux, so filters, sort info, selected rows, and pagination info survives route navigations.

image

CSS Dependencies

Sematable assumes that Bootstrap CSS, Font Awesome CSS, and react-select CSS are already loaded, so please make sure that's the case. Sematable should work with either Bootstrap 3 or Bootstrap 4. You can find the css for react-select in node_modules/react-select/dist/react-select.css.

Reducer

Before using the sematable wrapper, you need to setup the reducer. You should combine the provided reducer in your root reducer like this:

import { reducer as sematable } from 'sematable';

const reducer = combineReducers({
  sematable,
  ...
});

Usage

The most frequent use case for sematable is to show tabular data with some actions (edit, delete, etc.). See the below example for that.

For information on how to get selected rows and other table state, check out the section about selectors.

AppsTable.js:

import React, { Component, PropTypes } from 'react';
import sematable, { Table } from 'sematable';
import AppsTableActions from './AppsTableActions';

const columns = [
  { key: 'id', header: 'ID', sortable: true, searchable: true, primaryKey: true },
  { key: 'name', header: 'Application', sortable: true, searchable: true },
  { key: 'token', header: 'Token' },
  { key: 'plan', header: 'Plan', sortable: true },
  { key: 'role', header: 'Role', sortable: true },
  { key: 'actions', header: 'Actions', Component: AppsTableActions },
];

const propTypes = {
  headers: PropTypes.object.isRequired,
  data: PropTypes.array.isRequired,
  primaryKey: PropTypes.string.isRequired,
};

class AppsTable extends Component {
  render() {
    return (
      <Table
        {...this.props}
        selectable
        columns={columns}
      />
    );
  }
}

AppsTable.propTypes = propTypes;
export default sematable('allApps', AppsTable, columns);

AppsTableActions.js:

import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';

const propTypes = {
  row: PropTypes.object.isRequired,
};

class AppsTableActions extends Component {
  render() {
    const row = this.props.row;
    return (
      <Link to={`/settings/${row.id}`}>
        Settings
      </Link>
    );
  }
}
AppsTableActions.propTypes = propTypes;
export default AppsTableActions;

The sematable function will wrap your component and add filter, pagination, and other sematable functionality. The first argument is name of this table. It should be unique across your app. The second argument is your component, and the third are the column definitions.

  • You can omit the selectable property to hide the row selection controls.
  • You can use the className property to set the table class (table-sm table-striped table-hover is the default).

Columns definitions have the following properties:

  • key is the name of the property used in row objects
  • header is the header label that will be used for this column
  • title is the title that will be used when column header is hovered
  • className is the css class to use for the column <td> element
  • sortable defines if user should be able to sort by this column
  • searchable defines if user should be able to text-search by this column (simple case-insensitive substring search)
  • primaryKey defines if this column is the primary key
  • hidden defines if we should hide this column (useful if you don't want to show primary key column)
  • Component defines which component should be used to render cell contents
  • filterable defines if user should be able to filter rows by distinct values of this column
  • filterValues can be provided to define distinct filter values for this column. If not provided, unique values will be extracted from provided data.
  • getFilterTitle is a function with (value) signature that can be provided to customize the filter title
  • getFilterLabel is a function with (value) signature that can be provided to customize the filter label
  • getFilterClassName is a function with (value) signature that can be provided to customize the filter css class

At least one column definition should have primaryKey: true.

Check out stories/UsersTable.js to see how these properties can be used.

Advanced Usage

If you just need to show tabular data, with some actions for each row, you can use the provided Table component in combination with the sematable wrapper as shown above. Otherwise, you can write the table structure yourself.

The sematable(tableName, component, columns, configs) wrapper accepts four parameters:

  • tableName is a unique name for this table (used to store state)
  • component is the table component you want to wrap
  • columns is an array of column definitions
  • configs is an optional object where you can specify configuration properties

Showing page size and filter somewhere else

If you want to show the page size and filter somewhere else in your application, you can use the provided PageSizeContainer, and FilterContainer component. Like this:

import { PageSizeContainer, FilterContainer } from 'sematable';

export default props => (
    <div>
      <FilterContainer tableName="myTable" />
      <PageSizeContainer tableName="myTable" />
    </div>
);

You can style these components with style or className.

Configuration properties:

  • plain if you want only the table component to be returned without page size, pagination, or filter (will not use bootstrap grid)
  • showPageSize if page size select should be shown
  • showFilter if text filter field should be shown
  • defaultPageSize overrides the default page size (if not specified 5 will be used)
  • autoHidePagination if pagination should be hidden if the number of pages is 1 (default is true, which means pagination is hidden if the number of pages is equal to 1)
  • filterClassName css class for the filter component
  • filterClassNamePrefix css class prefix forwarded to react-select ('Select' by default)
  • filterContainerClassName css class for the filter component container element ('col-md-6' by default)
  • filterPlaceholder filter placeholder text
  • pageSizeClassName css class for the page size component ('col-md-6' by default)
  • pageSizeContainerClassName css class for the page size component container element ('col-md-6' by default)
  • sortKey default column to sort by (not sorted by default)
  • sortDirection default sort direction, asc or desc (asc by default)

There's no requirement that the wrapped component needs to be a table, it could be a list, a div, an image gallery, or anything else.

We will pass the following props to the wrapped component:

  • data is the filtered, sorted, and paginated data (the current view)
  • headers contains callbacks for sorting and selection
  • primaryKey is the name of the primary key field

Here's how you would implement the same example shown above without the provided Table component.

AppsTable.js:

import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import sematable, {
  SortableHeader,
  SelectAllHeader,
  SelectRow,
} from 'sematable';

const columns = [
  { key: 'id', header: 'ID', searchable: true, sortable: true, primaryKey: true },
  { key: 'name', header: 'Name', searchable: true, sortable: true },
];

const propTypes = {
  headers: PropTypes.object.isRequired,
  data: PropTypes.array.isRequired,
};

class AppsTable extends Component {
  render() {
    const {
      headers: { select, id, name },
      data,
    } = this.props;
    return (
      <div className="table-responsive">
        <table className="table table-sm table-striped table-hover">
          <thead>
            <tr>
              <SelectAllHeader {...select} />
              <SortableHeader {...id} />
              <SortableHeader {...name} />
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {data.map((app) => (
              <tr
                key={app.id}
                className={`${select.isSelected(app) ? 'table-info' : ''}`}
              >
                <td>
                  <SelectRow row={app} {...select} />
                </td>
                <td>{app.id}</td>
                <td>{app.name}</td>
                <td>
                  <Link to={`/settings/${app.id}`}>
                    Settings
                  </Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

AppsTable.propTypes = propTypes;
export default sematable('allApps', AppsTable, columns);

Selectors

We provide a few selectors that can be useful when working with sematable:

getSelectedRows
getInitialData
getIsInitialized
getFiltered
getFilter
getFilterText
getColumns
getSortInfo
getPageInfo
getVisible
getSelectAll
getPrimaryKey

These are exposed with makeSelectors(tableName). You should use them like this:

import { makeSelectors } from 'sematable';

const selectors = makeSelectors('myTable');
const mapStateToProps = (state) => ({
  selectedRows: selectors.getSelectedRows(state)
});

Actions

You can use the below actions to alter the state of the table:

  • tableDestroyState(tableName) resets/destroys the current state of the table. This can be used in componentWillUnmount() to reset the related redux state.
  • tableSetFilter(tableName, filterValue) sets the table filters where filterValue is an array of filter objects.

You can import actions from the sematable module like this:

import { tableDestroyState } from 'sematable';

Filters

You can set the list of filters by passing filterValue to your sematable component, or by using the tableSetFilter action. In either case, the provided value should be an array of two types of objects:

  • text filter defined simply as a string
  • value filter defined as object with properties key and value, where key is the column key you want to filter, and value is the value you want to filter by.

For example:

<UsersTable
  data={users}
  filterValue={[
    'Bob',
    { key: 'confirmed', value: true },
  ]}
/>

Or with tableSetFilter:

dispatch(tableSetFilter('usersTable', [
  'Bob',
  { key: 'confirmed', value: true },
]));

Custom components

CheckboxComponent for SelectAllHeader, accepting properties

{
  onChange: PropTypes.func,
  checked: PropTypes.bool,
  disabled: PropTypes.bool,
  children: PropTypes.node,
  className: PropTypes.string,
  id: PropTypes.string,
}

NoDataComponent for rendering custom messages when there is no data available, accepting properties:

{
  filter: PropTypes.array // List of applied filters for table
}

More Repositories

1

logagent-js

Extensible log shipper with input/output plugins, buffering, parsing, data masking, and small memory/CPU footprint
JavaScript
388
star
2

cheatsheets

209
star
3

sematext-agent-docker

Sematext Docker Agent - host + container metrics, logs & event collector
JavaScript
205
star
4

oxdpus

A toy tool that leverages the super powers of XDP to bring in-kernel IP filtering
Go
101
star
5

spm-agent-nodejs

NodeJS Monitoring Agent
JavaScript
61
star
6

uprobe-http-tracer

uprobe-based HTTP tracer for Go binaries
Go
60
star
7

solr-autocomplete

Solr AutoComplete implementation
Java
59
star
8

solr-redis

Solr Redis Extensions
Java
52
star
9

spm-agent-docker

SPM Docker Monitoring Agent - container + host metrics & events + logs collector
JavaScript
23
star
10

sematext-agent-java

Sematext Monitoring Agent
Java
22
star
11

sematext-logsene-android

Sematext Logs Client Library for Android
Java
22
star
12

query-segmenter

Solr Query Segmenter for structuring unstructured queries
Java
21
star
13

jmxc

Simple JMX Console
Java
17
star
14

sematext-agent-express

Express.js Monitoring and Logging Agent by Sematext
JavaScript
16
star
15

browser-sdk

Repository for the web browser SDK used for Sematext Experience.
JavaScript
15
star
16

solr-researcher

Solr SearchComponent for altering and re-executing queries that product poor results
Java
14
star
17

winston-logsene

Winston Transport for Logsene
JavaScript
14
star
18

sematext-agent-integrations

Core & Community developed monitoring integrations for Sematext monitoring agent
13
star
19

elasticsearch-field-stats

A replacement for Field Stats functionality which was removed from Elasticsearch
Java
11
star
20

blog-java_logging

Code examples for Java logging blog post
Java
11
star
21

activate

Examples for the Activate conference
Python
11
star
22

berlin-buzzwords-samples

Code and dataset samples for our Berlin Buzzwords presentations given by Sematext engineers
Shell
11
star
23

logsene-cli

Logsene Command-line Interface
JavaScript
10
star
24

logsene-js

Log shipping library for sending logs to Sematext from JavaScript apps
JavaScript
10
star
25

velocity

code samples and configs for our O'Reilly Velocity presentations
Shell
9
star
26

spm-agent

SPM Agent Framework written in NodeJS
JavaScript
9
star
27

HBaseMetricsContext

Java
9
star
28

related-searches

Related Searches - get queries related or similar to a given query
Java
8
star
29

spm-metrics-js

Sematext Agent for Custom Metrics
JavaScript
8
star
30

kite-morphlines-elasticsearch

Kite SDK Morphines for Elasticsearch
Java
8
star
31

spm-agent-mongodb

Sematext Agent for monitoring MongoDB
JavaScript
8
star
32

vercel-integrations

Forward logs and metrics from Vercel to Sematext for easy troubleshooting and debugging.
JavaScript
8
star
33

sematext-logsene-ios

Sematext Logs Client Library for iOS
Swift
7
star
34

solr-reindexer

Reindexes documents from a Solr query to a destination collection
Java
7
star
35

spm-tracing-api

Java Tracing API for Performance Monitoring and Transaction Tracing via SPM
Java
6
star
36

opentracing-materials

Collection of OpenTracing examples and scenarios for different languages / frameworks
Java
6
star
37

sematext-api-client-go

Sematext API Client
Go
5
star
38

solr-diagnostics

Gathers info from Solr: logs, configs, etc. Useful for remote debugging
Java
5
star
39

docker-spm-client

Docker Image with Sematext Agent for monitoring Docker Containers & Applications inside them
Shell
5
star
40

logsene-aws-lambda-cloudwatch

AWS Lambda script to send CloudWatch logs to Logsene
JavaScript
5
star
41

lucene-revolution-samples

Code and dataset samples for our Lucene Revolution presentations given by Sematext engineers
Ruby
5
star
42

sematext-metrics-reporter

Coda Metrics SPM Reporter
Java
5
star
43

elasticsearch-intro

Some information to get you started with Elasticsearch
Shell
4
star
44

meetups

Commands and sample data for various meetups
Shell
3
star
45

cloudwatch-sematext-aws-lambda-log-shipper

Code sample for tutorial about creating a centralized logging system for AWS Lambda with Sematext Logsene.
JavaScript
3
star
46

terraform-provider-sematext

Sematext Terraform Provider
Go
3
star
47

sematext-api-client-javascript

Sematext API Client for Node.js
JavaScript
3
star
48

sematext-api-client-java

Sematext API Client for Java
Java
2
star
49

kamon-spm-example

Example Akka App and Config for Akka and Play monitoring with Kamon and SPM
Scala
2
star
50

terraform-examples

2
star
51

spm-agent-os

Sematext Agent for OS metrics written in Node.js
JavaScript
2
star
52

docs

Sematext Documentation
HTML
2
star
53

sematext-api-client-rust

Sematext API Client for Rust
Rust
2
star
54

eslint-plugin-esm-import

ESLint plugin which enforces explicit .js extensions in local imports while leveraging import resolvers
JavaScript
2
star
55

logsene-aws-lambda-s3

AWS Lambda script to send S3 logs to Logsene
Python
1
star
56

logagent-input-kafka

Logagent plugin to read messages from Apache Kafka
JavaScript
1
star
57

sematext-metrics-gem

Ruby Gem for pushing Custom Metrics into SPM
Ruby
1
star
58

sematext-api-client-php

Sematext API Client for PHP
PHP
1
star
59

ansible-config-sematext

Ansible Config Role for Sematext monitoring agents
1
star
60

BasecampMigrator

1
star
61

sematext-metrics

Java Library for sending Custom Metrics to SPM
Java
1
star
62

imap-email-extractor

Java
1
star
63

sematext-api-client-python

Sematext API Client for Python
Python
1
star
64

webcampzagreb

WebCamp Zagreb related materials
1
star
65

sematext-api-client-ruby

Sematext API Client for Ruby
Ruby
1
star