[#3] Rename filterable -> searchable

README.md

@@ -2,7 +2,8 @@
 
 Sematable wraps a table component, and provides:
 
- - filtering
+ - filtering by column value
+ - search with text
  - sorting
  - row selection
  - pagination
@@ -42,8 +43,8 @@ import sematable, { Table } from 'sematable';
 import AppsTableActions from './AppsTableActions';
 
 const columns = [
-  { key: 'id', header: 'ID', sortable: true, filterable: true, primaryKey: true },
-  { key: 'name', header: 'Application', sortable: true, filterable: true },
+  { 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 },
@@ -108,7 +109,7 @@ 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
  - _sortable_ defines if user should be able to sort by this column
- - _filterable_ defines if user should be able to filter by this column (simple case-insensitive substring search)
+ - _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
@@ -157,8 +158,8 @@ import sematable, {
 } from 'sematable';
 
 const columns = {
-  id: { header: 'ID', filterable: true, sortable: true, primaryKey: true },
-  name: { header: 'Name', filterable: true, sortable: true },
+  id: { header: 'ID', searchable: true, sortable: true, primaryKey: true },
+  name: { header: 'Name', searchable: true, sortable: true },
 };
 
 const propTypes = {

src/Filter.js

@@ -28,7 +28,7 @@ class Filter extends Component {
     return (
       <Creatable
         options={options}
-        noResultsText="No tags found, type text and press Enter to search"
+        noResultsText="Type text to search, press Enter to save as filter"
         placeholder="Search by text or tags"
         promptTextCreator={(txt) => `Search for '${txt}'`}
         onChange={(selected) => onChange(selected)}

src/selectors.js

@@ -32,7 +32,7 @@ function filter(rows = [], filters = [], filterText, columns) {
   if (textFilters.length > 0) {
     // apply text filters across all columns
     filteredRows = _.filter(rows, row => _.some(columns, (column) => {
-      if (!column.filterable) {
+      if (!column.searchable) {
         return false;
       }
       const normalized = String(_.get(row, column.key)).toLowerCase();

src/sematable.js

@@ -53,8 +53,8 @@ const propTypes = {
  * and column definitions.  Column definitions should look like this:
  *
  *  {
- *    id: { header: 'ID', filterable: true },
- *    name: { header: 'Name', filterable: true },
+ *    id: { header: 'ID', searchable: true },
+ *    name: { header: 'Name', searchable: true },
  *  };
  *
  */

stories/UsersTable.js

@@ -6,8 +6,8 @@ import './style.css';
 export const USERS_TABLE = 'usersTable';
 const columns = [
   { key: 'id', primaryKey: true, header: 'ID' },
-  { key: 'firstName', header: 'First name', filterable: true, sortable: true },
-  { key: 'lastName', header: 'Last name', filterable: true, sortable: true },
+  { key: 'firstName', header: 'First name', searchable: true, sortable: true },
+  { key: 'lastName', header: 'Last name', searchable: true, sortable: true },
   {
     key: 'status',
     header: 'Status',