npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-table-kit

v1.0.4

Published

A react table component with custom components support and functionality to sort, search, export data, ...

Downloads

3

Readme

react-table-kit

npm Travis branch Codecov branch storybook

A react table component with custom components support and functionality to sort, search, export data, ...

Table of Contents

Why?

Every react table component I found was using its own styling but you couldn't use it with a css-in-js library. I wanted to use my own components to style the table without relying on className and css files. So this library has most of the functionality of the common table components like react-table or react-bootstrap-table but without styling and leaving the option to pass your own components where the styling is up to you. Want to use plain CSS, or a css-in-js library, no problem, its up to you.

Installation

$ npm i react-table-kit -S

or

$ yarn add react-table-kit

Components

Take a look into the usage section for a detailed example.

Table

Note: you can also use the default export.

This component renders a table wich has a lot of different functionality.

Functionality:

  • custom components: pass you own components
  • sort the table by columns
  • search the table columns
    • this column includes the searchphrase
    • this column is exactly the searchphrase
  • search the complete table
    • some column includes the searchphrase
    • some column is exactly the searchphrase
  • clickable cells
  • clickable rows
  • download the table content as CSV formatted file

Syntax

Render a table.

const myTable = (props) => (
  <Table
    buttonExportCSV={...}
    columns={...}
    data={...}
    exportCSV={...}
    inputColumnSearch={...}
    inputTableSearch={...}
    onClickCell={...}
    onClickRow={...}
    table={...}
    tableSearch={...}
    td={...}
    th={...}
    trBody={...}
    trHead={...}
  />
);

Props

  • buttonExportCSV
    • Type: element
    • Default: <button value="Export CSV" />
  • columns
    • Type: array of objects - required
    • Default: []
  • data
    • Type: array of objects - required
    • Default: []
  • exportCSV
    • Type: boolean
    • Default: false
  • inputColumnSearch
    • Type: element
    • Default: <input type="text" placeholder="Search column" />
  • inputTableSearch
    • Type: element
    • Default: <input type="text" placeholder="Search table" />
  • noDataMessage
    • Type: string
    • Default: 'No data found'
  • onClickCell
    • Type: function
    • Default: (item) => item;
  • onClickRow
    • Type: function
    • Default: (item) => item;
  • table
    • Type: element
    • Default: <table />
  • tableSearch
    • Type: string
    • Default: ''
  • td
    • Type: element
    • Default: <td />
  • th
    • Type: element
    • Default: <th />
  • trBody
    • Type: element
    • Default: <tr />
  • trHead
    • Type: element
    • Default: <tr />
Required Props

You need at least data and columns to render a table.

data

data is an array of objects.

  • each object represents one row
    • each entry in the object represents one cell in the table
    • each object has the same keys
    • each key represents a column name

An example of data.

const data = [
  {
    number: 1,
    first: 'Mark',
    last: 'Otto',
    handle: '@mdo',
  },
  ...
];
columns

columns is an array of objects.

  • each object holds at least two keys
    • header: the name of the column
    • accessor: the way to access the value in the data object
  • can be extended by two optional keys
    • sort: boolean
    • search: includes or exact

An example of columns.

const columns = [
  {
    header: '#',
    accessor: 'number',
    search: 'exact',
    sort: true,
  },
  {
    header: 'First',
    accessor: 'first',
    search: 'exact',
    sort: true,
  },
  {
    header: 'Last',
    accessor: 'last',
    search: 'exact',
    sort: true,
  },
  {
    header: 'Handle',
    accessor: 'handle',
    search: 'exact',
    sort: true,
  },
];

Usage

An example how to use it. For more detailed information you can take a look at the documentation.

import React from 'react';
import { Table } from 'react-table-kit';

// use your own components
import { Button } from 'styled-button-component';
import { FormControl } from 'styled-form-component';
import { Table as T, Tr } from 'styled-table-component';

const columns = [
  {
    header: '#',
    accessor: 'number',
    search: 'exact',
    sort: true,
  },
  {
    header: 'First',
    accessor: 'first',
    search: 'exact',
    sort: true,
  },
  {
    header: 'Last',
    accessor: 'last',
    search: 'exact',
    sort: true,
  },
  {
    header: 'Handle',
    accessor: 'handle',
    search: 'exact',
    sort: true,
  },
];

export const data = [
  {
    number: 1,
    first: 'mark',
    last: 'otto',
    handle: '@mdo',
  },
  ...
]

export const myTable = (props) => (
  <Table
    buttonExportCSV={<Button success value="Export CSV" />}
    columns={columns}
    data={data}
    exportCSV={true}
    inputColumnSearch={<FormControl borderRadius="0" sm type="text" placeholder="Search column" />}
    inputTableSearch={<FormControl borderRadius="0" sm type="text" placeholder="Search table" />}
    onClickCell={(item) => alert(`"cellValue": "${item}"`)}
    onClickRow={(item) => alert(`"rowValue": ${JSON.stringify(item, null, 2)};`)}
    table={<T hover bordered />}
    tableSearch="exact"
    trBody={<Tr />}
  />
);

License

MIT © Lukas Aichbauer