Avav Smith

Avav Smith

1611166380

ReactJS / Redux Data Table

Sematable

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

Getting Started

If you would like to simply test the table alone in your browser, we have included React Storybook.

npm install
npm run storybook

Then open your browser to http://localhost:6006/. Try to delete the search filters and watch how the table responds. There are several stories featuring Filters, Bootstrap, and Editable cells.

⚠️ 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
}

Download Details:

Author: sematext

Source Code: https://github.com/sematext/sematable

#react #reactjs #javascript

What is GEEK

Buddha Community

ReactJS / Redux Data Table
 iOS App Dev

iOS App Dev

1620466520

Your Data Architecture: Simple Best Practices for Your Data Strategy

If you accumulate data on which you base your decision-making as an organization, you should probably think about your data architecture and possible best practices.

If you accumulate data on which you base your decision-making as an organization, you most probably need to think about your data architecture and consider possible best practices. Gaining a competitive edge, remaining customer-centric to the greatest extent possible, and streamlining processes to get on-the-button outcomes can all be traced back to an organization’s capacity to build a future-ready data architecture.

In what follows, we offer a short overview of the overarching capabilities of data architecture. These include user-centricity, elasticity, robustness, and the capacity to ensure the seamless flow of data at all times. Added to these are automation enablement, plus security and data governance considerations. These points from our checklist for what we perceive to be an anticipatory analytics ecosystem.

#big data #data science #big data analytics #data analysis #data architecture #data transformation #data platform #data strategy #cloud data platform #data acquisition

Gerhard  Brink

Gerhard Brink

1620629020

Getting Started With Data Lakes

Frameworks for Efficient Enterprise Analytics

The opportunities big data offers also come with very real challenges that many organizations are facing today. Often, it’s finding the most cost-effective, scalable way to store and process boundless volumes of data in multiple formats that come from a growing number of sources. Then organizations need the analytical capabilities and flexibility to turn this data into insights that can meet their specific business objectives.

This Refcard dives into how a data lake helps tackle these challenges at both ends — from its enhanced architecture that’s designed for efficient data ingestion, storage, and management to its advanced analytics functionality and performance flexibility. You’ll also explore key benefits and common use cases.

Introduction

As technology continues to evolve with new data sources, such as IoT sensors and social media churning out large volumes of data, there has never been a better time to discuss the possibilities and challenges of managing such data for varying analytical insights. In this Refcard, we dig deep into how data lakes solve the problem of storing and processing enormous amounts of data. While doing so, we also explore the benefits of data lakes, their use cases, and how they differ from data warehouses (DWHs).


This is a preview of the Getting Started With Data Lakes Refcard. To read the entire Refcard, please download the PDF from the link above.

#big data #data analytics #data analysis #business analytics #data warehouse #data storage #data lake #data lake architecture #data lake governance #data lake management

Cyrus  Kreiger

Cyrus Kreiger

1618039260

How Has COVID-19 Impacted Data Science?

The COVID-19 pandemic disrupted supply chains and brought economies around the world to a standstill. In turn, businesses need access to accurate, timely data more than ever before. As a result, the demand for data analytics is skyrocketing as businesses try to navigate an uncertain future. However, the sudden surge in demand comes with its own set of challenges.

Here is how the COVID-19 pandemic is affecting the data industry and how enterprises can prepare for the data challenges to come in 2021 and beyond.

#big data #data #data analysis #data security #data integration #etl #data warehouse #data breach #elt

Macey  Kling

Macey Kling

1597579680

Applications Of Data Science On 3D Imagery Data

CVDC 2020, the Computer Vision conference of the year, is scheduled for 13th and 14th of August to bring together the leading experts on Computer Vision from around the world. Organised by the Association of Data Scientists (ADaSCi), the premier global professional body of data science and machine learning professionals, it is a first-of-its-kind virtual conference on Computer Vision.

The second day of the conference started with quite an informative talk on the current pandemic situation. Speaking of talks, the second session “Application of Data Science Algorithms on 3D Imagery Data” was presented by Ramana M, who is the Principal Data Scientist in Analytics at Cyient Ltd.

Ramana talked about one of the most important assets of organisations, data and how the digital world is moving from using 2D data to 3D data for highly accurate information along with realistic user experiences.

The agenda of the talk included an introduction to 3D data, its applications and case studies, 3D data alignment, 3D data for object detection and two general case studies, which are-

  • Industrial metrology for quality assurance.
  • 3d object detection and its volumetric analysis.

This talk discussed the recent advances in 3D data processing, feature extraction methods, object type detection, object segmentation, and object measurements in different body cross-sections. It also covered the 3D imagery concepts, the various algorithms for faster data processing on the GPU environment, and the application of deep learning techniques for object detection and segmentation.

#developers corner #3d data #3d data alignment #applications of data science on 3d imagery data #computer vision #cvdc 2020 #deep learning techniques for 3d data #mesh data #point cloud data #uav data

Uriah  Dietrich

Uriah Dietrich

1618457700

What Is ETLT? Merging the Best of ETL and ELT Into a Single ETLT Data Integration Strategy

Data integration solutions typically advocate that one approach – either ETL or ELT – is better than the other. In reality, both ETL (extract, transform, load) and ELT (extract, load, transform) serve indispensable roles in the data integration space:

  • ETL is valuable when it comes to data quality, data security, and data compliance. It can also save money on data warehousing costs. However, ETL is slow when ingesting unstructured data, and it can lack flexibility.
  • ELT is fast when ingesting large amounts of raw, unstructured data. It also brings flexibility to your data integration and data analytics strategies. However, ELT sacrifices data quality, security, and compliance in many cases.

Because ETL and ELT present different strengths and weaknesses, many organizations are using a hybrid “ETLT” approach to get the best of both worlds. In this guide, we’ll help you understand the “why, what, and how” of ETLT, so you can determine if it’s right for your use-case.

#data science #data #data security #data integration #etl #data warehouse #data breach #elt #bid data