# resiq-table

> Material tables with custom styling

Latest version **1.1.24** (published 2020-03-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install resiq-table
pnpm add resiq-table
yarn add resiq-table
bun add resiq-table
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.24 |
| Published | 2020-03-12 |
| First published | 2019-09-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 227.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sunny S.M |
| Maintainers | sunny.zion |
| Keywords | react, material-ui, material, datatable, table |

## Links

- npm: https://www.npmjs.com/package/resiq-table
- npm.io page: https://npm.io/package/resiq-table

## Dependencies (9)

- [filefy](https://npm.io/package/filefy.md) 0.1.9
- [date-fns](https://npm.io/package/date-fns.md) ^2.0.0-alpha.27
- [debounce](https://npm.io/package/debounce.md) ^1.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [@date-io/date-fns](https://npm.io/package/@date-io/date-fns.md) ^1.1.0
- [react-beautiful-dnd](https://npm.io/package/react-beautiful-dnd.md) 11.0.3
- [@material-ui/pickers](https://npm.io/package/@material-ui/pickers.md) ^3.2.2
- [react-double-scrollbar](https://npm.io/package/react-double-scrollbar.md) 0.0.15

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.1.24 (latest) — 2020-03-12
- 1.1.23 — 2020-03-12
- 1.1.22 — 2020-02-20
- 1.1.21 — 2020-01-14
- 1.1.20 — 2020-01-14
- 1.1.19 — 2020-01-14
- 1.1.18 — 2020-01-14
- 1.1.17 — 2020-01-10
- 1.1.16 — 2019-12-26
- 1.1.15 — 2019-12-14
- 1.1.14 — 2019-11-25
- 1.1.13 — 2019-11-22
- 1.1.12 — 2019-11-22
- 1.1.11 — 2019-11-22
- 1.1.10 — 2019-11-22
- … 12 more at https://npm.io/package/resiq-table/versions

## README

<h1 align="center">resiq-table</h1>
A simple and powerful Datatable for React based on [Material Table](https://material-table.com/#/) with some additional customization.

## Key features

- [Actions](https://material-table.com/#/docs/features/actions)
- [Component overriding](https://material-table.com/#/docs/features/component-overriding)
- [Custom column rendering](https://material-table.com/#/docs/features/custom-column-rendering)
- [Detail Panel](https://material-table.com/#/docs/features/detail-panel)
- [Editable](https://material-table.com/#/docs/features/editable)
- [Export](https://material-table.com/#/docs/features/export)
- [Filtering](https://material-table.com/#/docs/features/filtering)
- [Grouping](https://material-table.com/#/docs/features/grouping)
- [Localization](https://material-table.com/#/docs/features/localization)
- [Remote Data](https://material-table.com/#/docs/features/remote-data)
- [Search](https://material-table.com/#/docs/features/search)
- [Selection](https://material-table.com/#/docs/features/selection)
- [Sorting](https://material-table.com/#/docs/features/sorting)
- [Styling](https://material-table.com/#/docs/features/styling)
- [Tree Data](https://material-table.com/#/docs/features/tree-data)

## Installation

#### 1.Install package

To install resiq-table with `npm`:

    npm install resiq-table --save
    npm install @material-ui/core --save

To install material-table with `yarn`:

    yarn add resiq-table
    yarn add @material-ui/core

#### 2.Add material icons

There are two ways to use icons in material-table either import the material icons font via html OR import material icons and use the material-table `icons` prop.

##### HTML

```html
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
```

OR

##### Import Material icons

Icons can be imported to be used in material-table offering more flexibility for customising the look and feel of material table over using a font library.

To install @material-ui/icons with `npm`:

    npm install @material-ui/icons --save

To install @material-ui/icons with `yarn`:

    yarn add @material-ui/icons

If your environment doesn't support tree-shaking, the **recommended** way to import the icons is the following:

## Usage

Here is a basic example of using material-table within a react application.

```jsx
import React, { Component } from "react";
import ReactDOM from "react-dom";
import ResiqMaterialTable from "resiq-table";

class App extends Component {
  render() {
    return (
      <div style={{ maxWidth: "100%" }}>
        <ResiqMaterialTable
          columns={[
            { title: "Adı", field: "name" },
            { title: "Soyadı", field: "surname" },
            { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
            {
              title: "Doğum Yeri",
              field: "birthCity",
              lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
            }
          ]}
          data={[
            { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }
          ]}
          title="Demo Title"
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("react-div"));

## License

This project is licensed under the terms of the [MIT license](/LICENSE).

---
_Source: https://npm.io/package/resiq-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._