More Components To Display your data

There are more components that you can use to display your data. Here are a few examples:

TableWalker

The TableWalker component is a simple table that allows you to display your data in a table format.

By using the TableWalker component, you can easily display your data with sorting, filtering, and pagination.

import { useMemo } from 'react';
import { GraphicWalker } from '@kanaries/graphic-walker';
import { transData } from '@kanaries/graphic-walker/dataSource/utils';
import data from './data.json';
 
export default function App() {
    const { dataSource, fields } = useMemo(() => transData(data), [data]);
    return (
        <TableWalker data={dataSource} fields={fields} pageSize={50} />
    );
}

PureRenderer

The PureRenderer component is a simple component to display your data in a chart, by using a existing chart spec that saved from GraphicWalker.

See here to know how to save a chart spec from GraphicWalker.

import { PureRenderer } from '@kanaries/graphic-walker';
import data from './data.json';
import spec from './spec.json';
 
export default function App() {
     return <PureRenderer type="local" rawData={data} visualConfig={spec[0].config} visualState={spec[0].encodings} visualLayout={spec[0].layout} />
}

GraphicRenderer

The GraphicRenderer component is a simple component to display your data in a chart with filters, by using a existing chart spec that saved from GraphicWalker.

import { useMemo } from 'react';
import { GraphicRenderer } from '@kanaries/graphic-walker';
import { transData } from '@kanaries/graphic-walker/dataSource/utils';
import data from './data.json';
import spec from './spec.json';
 
export default function App() {
    const { dataSource, fields } = useMemo(() => transData(data), [data]);
    return (
        <GraphicRenderer data={dataSource} fields={fields} chart={[spec[0]]} />
    );
}

Use GraphicWalker to Build a Dashboard Introduction